Webpack 4 splitchunks，如何强制常见的块？

时间：2018-03-22 10:23:11

标签： javascript reactjs webpack commonschunkplugin webpack-splitchunks

我试图将项目拆分为公共块，使用旧的commonChunks插件很容易，因为该项目被分割成各种库... 使用新的splitChunks我无法达到相同的效果。所以我回到了一个基本的测试，试图了解新的splitChunks，不幸的是我面临同样的问题。 这里是配置文件：

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()
    ]
};

使用该配置我可以实现此输出，这正是我想要做的：

      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

这个例子非常简单，一切都很好！

  • pageA取决于react和commonAB - ＆gt;行
  • pageB取决于react和commonAB - ＆gt;行
  • pageC取决于react和commonCD - ＆gt;行
  • PageD取决于react和commonCD - ＆gt;行

但是，当我修改 ab_a.js 的代码并添加

import React from 'react';

输出是：

> 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

正如你所看到的，pageC和pageD取决于commonAB.js，但事实并非如此！ 这个例子非常简单，一切都还可以！

  • pageA取决于react和commonAB - ＆gt;行
  • pageB取决于react和commonAB - ＆gt;行
  • pageC取决于react和commonAB和commonCD - ＆gt;错
  • pageD取决于react和commonAB和commonCD - ＆gt;错

此外，如果我有导入React从＆＃39;反应＆＃39 ;; 到cs_c.js（已经预料到，但我没有）我有输出：

      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取决于react和commonAB和commonCD - ＆gt;错了
  • pageB取决于react和commonAB和commonCD - ＆gt;错了
  • pageC取决于react和commonAB和commonCD - ＆gt;错了
  • pageD取决于react和commonAB和commonCD - ＆gt;错

感谢您的帮助！

1 个答案:

答案 0 :(得分：2)

经过对github的更多讨论，以及更多的研究......这种配置就像一个魅力：

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({})
    ]
};

产生所需的输出：

> 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]

比以前的Commons Chunks插件更简单......

  

感谢github网站项目中的ooflorent和sokra。

相关问题
最新问题