javascriptreactjswebpackcommonschunkpluginwebpack-splitchunks

Webpack 4 splitchunks, how to force common chunks?


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 !

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 !

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

Thank you for your help !


Solution

  • 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
    
    > testcommon@1.0.0 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.