Webpack 4 splitchunks, how to force common chunks?

javascript reactjs webpack commonschunkplugin webpack-splitchunks
Coolhand picture Coolhand · Mar 22, 2018 · Viewed 7.1k times · Source

I'm trying to split a project into commons chunks, it'was easy with the old commonChunks plugin because the project is designed to be splitted into kinds of libraries... With the new splitChunks i cannot achieve the same result. So i came back to a basic test to try to understand the new splitChunks, unfortunatley i'm facing sames problems. Here the configuration file :

const webpack = require('webpack'); //to access built-in plugins
const path = require('path');

var PROD = JSON.parse(process.env.PROD_ENV || '0');

const groupsOptions = {chunks: "all", minSize:0, minChunks: 1, reuseExistingChunk: true, enforce: true};

const reactConfig = {
    entry: {
        "react": ["react", "react-dom"],
        "pageA": "./src/A.jsx",
        "pageB": "./src/B.jsx",
        "pageC": "./src/C.jsx",
        "pageD": "./src/D.jsx",
        "commonAB": [ "./src/ab_a.js", "./src/ab_b.js"],
        "commonCD": ["./src/cd_c.js", "./src/cd_d.js"]
    },
    output: {
        path: __dirname + '/build/',
        filename: PROD
            ? "[name].min.js"
            : "[name].js"
    },
    module: {
        rules: [
            {
                test: /\.jsx$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["es2015", "react"]
                    }
                }
            }
        ]
    },
    optimization: {
        splitChunks: {
            cacheGroups:{
                react: {test:'react', name: "react", ...groupsOptions},
                AB: {test:'commonAB', name: "commonAB", ...groupsOptions},
                CD: {test:'commonCD', name: "commonCD", ...groupsOptions}
            }
        }
    },
    plugins: [
        // new webpack.optimize.CommonsChunkPlugin({
        //     name: "react",
        //     filename: "react.js",
        //     chunks: ["pageA", "pageB"]
        // }),
        // new webpack.optimize.CommonsChunkPlugin({
        //     name: "commonAB",
        //     chunks: ["pageA", "pageB"]
        // })
        //new webpack.optimize.UglifyJsPlugin()
    ]
};

With that config i can achieve this output, that is exactly what i want to do :

      Asset      Size    Chunks             Chunk Names
commonAB.js  1.67 KiB  commonAB  [emitted]  commonAB
commonCD.js  1.67 KiB  commonCD  [emitted]  commonCD
   pageA.js   8.1 KiB     pageA  [emitted]  pageA
   pageB.js  8.15 KiB     pageB  [emitted]  pageB
   pageC.js   8.1 KiB     pageC  [emitted]  pageC
   pageD.js   8.1 KiB     pageD  [emitted]  pageD
   react.js   631 KiB     react  [emitted]  react
Entrypoint pageA = react.js commonAB.js pageA.js
Entrypoint pageB = react.js commonAB.js pageB.js
Entrypoint pageC = react.js commonCD.js pageC.js
Entrypoint pageD = react.js commonCD.js pageD.js
[./src/A.jsx] 2.51 KiB {pageA} [built]
[./src/B.jsx] 2.56 KiB {pageB} [built]
[./src/C.jsx] 2.51 KiB {pageC} [built]
[./src/D.jsx] 2.51 KiB {pageD} [built]
[./src/ab_a.js] 122 bytes {commonAB} [built]
[./src/ab_b.js] 122 bytes {commonAB} [built]
[./src/cd_c.js] 122 bytes {commonCD} [built]
[./src/cd_d.js] 122 bytes {commonCD} [built]
   [0] multi react react-dom 40 bytes {react} [built]
   [1] multi ./src/ab_a.js ./src/ab_b.js 40 bytes {commonAB} [built]
   [2] multi ./src/cd_c.js ./src/cd_d.js 40 bytes {commonCD} [built]
    + 23 hidden modules

This exemple is very simple and everything is OK !

  • pageA depends from react and commonAB -> OK
  • pageB depends from react and commonAB -> OK
  • pageC depends from react and commonCD -> OK
  • pageD depends from react and commonCD -> OK

But then, when i modify the code of ab_a.js and add 

import React from 'react';

the output is :

> webpack --config src.config.js --colors --progress --watch --mode development

 10% building modules 3/3 modules 0 active
Webpack is watching the files…
                                                                                                                                                                                                      Hash: 020e818e618248278134
Version: webpack 4.2.0
Time: 1900ms
Built at: 2018-3-22 11:03:21
      Asset      Size    Chunks             Chunk Names
commonAB.js  1.94 KiB  commonAB  [emitted]  commonAB
commonCD.js  1.67 KiB  commonCD  [emitted]  commonCD
   pageA.js   8.1 KiB     pageA  [emitted]  pageA
   pageB.js  8.15 KiB     pageB  [emitted]  pageB
   pageC.js  8.11 KiB     pageC  [emitted]  pageC
   pageD.js  8.11 KiB     pageD  [emitted]  pageD
   react.js   631 KiB     react  [emitted]  react
Entrypoint pageA = commonAB.js react.js pageA.js
Entrypoint pageB = commonAB.js react.js pageB.js
Entrypoint pageC = commonAB.js react.js commonCD.js pageC.js
Entrypoint pageD = commonAB.js react.js commonCD.js pageD.js
[./src/A.jsx] 2.51 KiB {pageA} [built]
[./src/B.jsx] 2.56 KiB {pageB} [built]
[./src/C.jsx] 2.51 KiB {pageC} [built]
[./src/D.jsx] 2.51 KiB {pageD} [built]
[./src/ab_a.js] 152 bytes {commonAB} [built]
[./src/ab_b.js] 122 bytes {commonAB} [built]
[./src/cd_c.js] 122 bytes {commonCD} [built]
[./src/cd_d.js] 122 bytes {commonCD} [built]
   [0] multi react react-dom 40 bytes {react} [built]
   [1] multi ./src/ab_a.js ./src/ab_b.js 40 bytes {commonAB} [built]
   [2] multi ./src/cd_c.js ./src/cd_d.js 40 bytes {commonCD} [built]
    + 23 hidden modules

As you can see pageC and pageD depends of commonAB.js that is not the case ! This exemple is very simple and everything is OK !

  • pageA depends from react and commonAB -> OK
  • pageB depends from react and commonAB -> OK
  • pageC depends from react and commonAB AND commonCD -> Wrong
  • pageD depends from react and commonAB AND commonCD -> Wrong

Furthermore if i had import React from 'react'; into cs_c.js (has expected, but not has i want) i have output :

      Asset      Size    Chunks             Chunk Names
commonAB.js  1.94 KiB  commonAB  [emitted]  commonAB
commonCD.js  1.94 KiB  commonCD  [emitted]  commonCD
   pageA.js  8.11 KiB     pageA  [emitted]  pageA
   pageB.js  8.16 KiB     pageB  [emitted]  pageB
   pageC.js  8.11 KiB     pageC  [emitted]  pageC
   pageD.js  8.11 KiB     pageD  [emitted]  pageD
   react.js   631 KiB     react  [emitted]  react
Entrypoint pageA = commonCD.js commonAB.js react.js pageA.js
Entrypoint pageB = commonCD.js commonAB.js react.js pageB.js
Entrypoint pageC = commonCD.js commonAB.js react.js pageC.js
Entrypoint pageD = commonCD.js commonAB.js react.js pageD.js
[./src/A.jsx] 2.51 KiB {pageA} [built]
[./src/B.jsx] 2.56 KiB {pageB} [built]
[./src/C.jsx] 2.51 KiB {pageC} [built]
[./src/D.jsx] 2.51 KiB {pageD} [built]
[./src/ab_a.js] 152 bytes {commonAB} [built]
[./src/ab_b.js] 122 bytes {commonAB} [built]
[./src/cd_c.js] 152 bytes {commonCD} [built]
[./src/cd_d.js] 122 bytes {commonCD} [built]
   [0] multi react react-dom 40 bytes {react} [built]
   [1] multi ./src/ab_a.js ./src/ab_b.js 40 bytes {commonAB} [built]
   [2] multi ./src/cd_c.js ./src/cd_d.js 40 bytes {commonCD} [built]
    + 23 hidden modules
  • pageA depends from react and commonAB AND commonCD -> Wrong
  • pageB depends from react and commonAB AND commonCD -> Wrong
  • pageC depends from react and commonAB AND commonCD -> Wrong
  • pageD depends from react and commonAB AND commonCD -> Wrong

Thank you for your help !

Answer

Coolhand picture Coolhand · Apr 3, 2018

After more talks on github, and more researches ... this configuration is working like a charm:

const webpack = require('webpack');
const path = require('path');
const ManifestPlugin = require('webpack-manifest-plugin');

var PROD = JSON.parse(process.env.PROD_ENV || '0');

const groupsOptions = {chunks: "all", minSize:0, minChunks: 1, reuseExistingChunk: true, enforce: true};

const reactConfig = {
    entry: {
        "pageA": "./src/A.jsx",
        "pageB": "./src/B.jsx",
        "pageC": "./src/C.jsx",
        "pageD": "./src/D.jsx"
    },
    output: {
        path: __dirname + '/build/',
        filename: PROD
            ? "[name].min.js"
            : "[name].js"
    },
    module: {
        rules: [
            {
                test: /\.jsx$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["es2015", "react"]
                    }
                }
            }
        ]
    },
    optimization: {
    namedModules: true,
    runtimeChunk: true, // <-- to avoid all hashes of generated file change every time a piece of code change in 1 file ... (and spare 4kb)
        splitChunks: {
            chunks: 'all',
            name : false,
            cacheGroups:{
                react: {test:/react/, name: "react", ...groupsOptions},
                AB: {test:/ab_a.js/, name: "commonAB", ...groupsOptions},
                AB: {test:/ab_b.js/, name: "commonAB", ...groupsOptions},
                CD: {test:/cd_c.js/ , name: "commonAB", ...groupsOptions},
                CD: {test:/cd_d.js/, name: "commonCD", ...groupsOptions}
            }
        }
    },
    plugins: [
        new ManifestPlugin({})
    ]
};

producing the desired output :

> npm run build

> [email protected] build D:\dev\testCommon
> webpack --config src.config.js --colors --progress --watch --mode development

  0% compiling
Webpack is watching the files…
                                                                                                                                                                                                                                  Hash: 3ab0d2c347627bd736f0
Version: webpack 4.4.1
Time: 1917ms
Built at: 2018-4-3 10:26:02
        Asset       Size    Chunks             Chunk Names
  commonAB.js  657 bytes  commonAB  [emitted]  commonAB
  commonCD.js  987 bytes  commonCD  [emitted]  commonCD
     pageA.js   34.7 KiB     pageA  [emitted]  pageA
     pageB.js   34.7 KiB     pageB  [emitted]  pageB
     pageC.js   34.4 KiB     pageC  [emitted]  pageC
     pageD.js   34.4 KiB     pageD  [emitted]  pageD
     react.js    655 KiB     react  [emitted]  react
manifest.json  196 bytes            [emitted]
Entrypoint pageA = react.js commonAB.js pageA.js
Entrypoint pageB = react.js commonAB.js pageB.js
Entrypoint pageC = react.js commonCD.js pageC.js
Entrypoint pageD = react.js commonCD.js pageD.js
[./src/A.jsx] 2.49 KiB {pageA} [built]
[./src/B.jsx] 2.49 KiB {pageB} [built]
[./src/C.jsx] 2.49 KiB {pageC} [built]
[./src/D.jsx] 2.49 KiB {pageD} [built]
[./src/ab_a.js] 191 bytes {pageB} {pageA} [built]
[./src/ab_b.js] 116 bytes {commonAB} [built]
[./src/cd_c.js] 148 bytes {pageD} {pageC} [built]
[./src/cd_d.js] 191 bytes {commonCD} [built]

Which is simplier than previous Commons Chunks Plugin...

Thanks to ooflorent and sokra from the webpack project on github.

Related questions

Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead

I am getting this error Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead. new webpack.optimize.CommonsChunkPlugin({ filename: DEBUG ? 'bundle.js' : 'bundle.min.js', name: "vendor" })

Read More
Correct path for img on React.js

I have some problem with my images on my react project. Indeed I always thought that relative path into src attribute was built on the files architecture Here my files architecture: components file1.jsx file2.jsx file3.jsx container img …

Read More
babel-loader jsx SyntaxError: Unexpected token

I'm a beginner in React + Webpack. I found a weird error in my hello world web app. I'm using babel-loader in webpack to help me convert jsx into js, but it seems like babel can't understand jsx syntax. Here are …

Read More