webpack-optimization-splitchunks

This playground project is based on webpack-splitchunks-playground

Webpack 4 optimization.splitChunks playground...

Related info

• webpack 4: Code Splitting, chunk graph and the splitChunks optimization
• RIP CommonsChunkPlugin

  webpack 4 removes the CommonsChunkPlugin in favor of two new options (optimization.splitChunks and optimization.runtimeChunk)

• Check Webpack-Demo project with more Webpack 4 configurations.
• More info/stats about initial project: PR#1

Tests

Project code structure:

src
├── bundles
│   ├── a.js
│   ├── b.js
│   ├── core-a.js
│   └── core-b.js
├── core-module-a.js
├── core-module-b.js
├── non-core-module-a.js
└── non-core-module-b.js

Minimum Config

Using webpack.config.entry.js to specify entypoints

npm run build:entry

Hash: 09cb46e3e80b0d3d7bba
Version: webpack 4.1.1
Time: 98ms
Built at: 3/11/2018 11:44:49 PM
          Asset      Size  Chunks             Chunk Names
coreA.bundle.js  3.62 KiB       0  [emitted]  coreA
coreB.bundle.js  3.64 KiB       1  [emitted]  coreB
    a.bundle.js  4.33 KiB       2  [emitted]  a
    b.bundle.js  4.35 KiB       3  [emitted]  b
Entrypoint coreA = coreA.bundle.js
Entrypoint coreB = coreB.bundle.js
Entrypoint a = a.bundle.js
Entrypoint b = b.bundle.js

Split Chunks optimization

Using webpack.config.js (configure optimization property)

npm run build

Hash: 01d77365c8faf3592a82
Version: webpack 4.1.1
Time: 104ms
Built at: 3/12/2018 12:10:52 AM
              Asset       Size  Chunks             Chunk Names
    coreA.bundle.js   5.67 KiB       0  [emitted]  coreA
    coreB.bundle.js   5.67 KiB       1  [emitted]  coreB
        a.bundle.js   6.28 KiB       2  [emitted]  a
        b.bundle.js   6.28 KiB       3  [emitted]  b
  vendors.bundle.js  418 bytes       4  [emitted]  vendors
a~b~coreA.bundle.js  163 bytes       5  [emitted]  a~b~coreA
a~b~coreB.bundle.js  163 bytes       6  [emitted]  a~b~coreB
Entrypoint coreA = vendors.bundle.js a~b~coreA.bundle.js coreA.bundle.js
Entrypoint coreB = vendors.bundle.js a~b~coreB.bundle.js coreB.bundle.js
Entrypoint a = vendors.bundle.js a~b~coreA.bundle.js a~b~coreB.bundle.js a.bundle.js
Entrypoint b = vendors.bundle.js a~b~coreA.bundle.js a~b~coreB.bundle.js b.bundle.js

License

MIT © Carloluis