Some advice #1

zhugexinxin · 2018-08-22T16:10:49Z

production环境下可以增加模块分割和增加CSS Tree Shake,For example

module.exports = {
optimization: {
    splitChunks: {
      chunks: "all",
        cacheGroups: {
          commons: {
            name: "commons",
            minChunks: 2
          },
          vendor: {
              test: /[\\/]node_modules[\\/]/,
              name: 'vendor',
          },
        }
    },
    runtimeChunk: {
        name: 'manifest'
    }
  },
  plugins: [
    new PurifyCssWebpack({
      paths: GlobAll.sync([
        path.join(__dirname, '../src/index.html'),
        path.join(__dirname, '../src/*.js')
      ])
    }),
}

xiaohesong · 2018-08-23T01:20:22Z

非常感谢，我看文档里说这些是默认配置好了。
我来改成all试下，不过看官网的例子似乎不是很倾向all, 这个是all的输出.

PurifyCssWebpack 我也来试下.

欢迎提意见 😄

xiaohesong · 2018-08-23T02:02:04Z

刚特意试了下，换成all会增加初始包的体积，可能和我代码有关系，我做了路由的按需加载，初始的包是不包含异步加载的代码，如果换成all导致把所有的都做了优化，导致初始包的体积增大。

加上all

                                Asset       Size  Chunks                    Chunk Names
                 3.cafa015f.chunk.css   1.04 KiB       3  [emitted]
 c242625896b0238f80fdc11c505f7723.jpg   8.27 KiB          [emitted]
            vendor.34737b19.chunk.css    260 KiB       0  [emitted]  [big]  vendor
             vendor.55b7da2f.chunk.js    423 KiB       0  [emitted]  [big]  vendor
              main.93e2d13f.chunk.css   2.09 KiB       1  [emitted]         main
               main.57642cc7.chunk.js   10.7 KiB       1  [emitted]         main
                 2.cafa015f.chunk.css   1.04 KiB       2  [emitted]
                  2.d8937a76.chunk.js   6.85 KiB       2  [emitted]
f1d380cc2f9bd1a396dc3a4f076fc656.jpeg     23 KiB          [emitted]
                  3.c30ea3d7.chunk.js   6.34 KiB       3  [emitted]
                 4.0067d0d1.chunk.css  351 bytes       4  [emitted]
                  4.3cd7a69a.chunk.js   3.86 KiB       4  [emitted]
                 5.4ddb10ac.chunk.css   1.89 KiB       5  [emitted]
                  5.d7041a35.chunk.js  565 bytes       5  [emitted]
                 manifest.eafa68a2.js   3.02 KiB       6  [emitted]         manifest
                         ./index.html  617 bytes          [emitted]
Entrypoint main [big] = manifest.eafa68a2.js vendor.34737b19.chunk.css vendor.55b7da2f.chunk.js main.93e2d13f.chunk.css main.57642cc7.chunk.js

默认的

                                Asset       Size  Chunks                    Chunk Names
                 4.d18893b4.chunk.css   1.04 KiB       4  [emitted]
 c242625896b0238f80fdc11c505f7723.jpg   8.27 KiB          [emitted]
                 0.8b18de0b.chunk.css   38.9 KiB       0  [emitted]
                  0.a97d9e24.chunk.js   19.3 KiB       0  [emitted]
                 1.e226d831.chunk.css   88.5 KiB       1  [emitted]
                  1.a6db3c7d.chunk.js   76.1 KiB       1  [emitted]
                    main.41af18a2.css    106 KiB       2  [emitted]         main
                     main.e0cb2a87.js    296 KiB       2  [emitted]  [big]  main
                 3.d18893b4.chunk.css   1.04 KiB       3  [emitted]
                  3.aa53f206.chunk.js   6.85 KiB       3  [emitted]
f1d380cc2f9bd1a396dc3a4f076fc656.jpeg     23 KiB          [emitted]
                  4.6277abd9.chunk.js   6.34 KiB       4  [emitted]
                 5.19cb645b.chunk.css  351 bytes       5  [emitted]
                  5.ec6a3164.chunk.js   3.86 KiB       5  [emitted]
                 6.84ef1013.chunk.css   1.89 KiB       6  [emitted]
                  6.b8f53f7f.chunk.js  565 bytes       6  [emitted]
                 7.7ace5723.chunk.css   16.9 KiB       7  [emitted]
                  7.9515623f.chunk.js     33 KiB       7  [emitted]
                 8.d35dc98e.chunk.css   11.6 KiB       8  [emitted]
                  8.b5cdcf43.chunk.js   12.9 KiB       8  [emitted]
                         ./index.html  411 bytes          [emitted]
Entrypoint main [big] = main.41af18a2.css main.e0cb2a87.js