1

我试图让 Webpack-4 splitChunks 优化来做到这一点：

  1. 将所有 JS 和 CSS 放在任何入口点，但不止一次使用到公共文件（CSS 和 JS）中。
  2. 将 MiniCssExtractPlugin 从 Vue 组件生成的所有 CSS 合并到同一个通用 CSS 文件中。

我有这个工作（如下），但第二个“extractedStuff”规则的效果是将所有入口点代码也放入共享块中，这就是我试图用那个“测试”来阻止的。“入口点”文件只是 webpack 存根，所有内容都在公共文件中，即使它只使用一次。它有效，但并不优雅。

有谁知道如何从第二条规则中排除入口点，还是有更好的方法来做到这一点？

有谁知道那些“模块，块”对象的定义在哪里，因为也许我可以通过某种方式更好地进行测试。

splitChunks: {

    cacheGroups: {     // Idea from github.com/webpack/webpack/issues/7230
        mainJS: {
            test: /\.js$/,
            name: "commons",
            chunks: "all",
            minChunks: 2,   // Makes it leave entry point JS alone.
            minSize: 0,
            priority: 20,
            enforce: true
        },
        extractedStuff: {
            test: (module, chunks) => module.depth > 0, 
            name: "commons", // Append to same file as previous rule.
            chunks: "all",
            minChunks: 1,   // ..or single-use CSS is not bundled.
            minSize: 0,
            priority: 10,
            enforce: true
        }
}

},

4

1 回答 1

1

我正在摸索这个，但这就是我解决问题的方法......

上面的问题是extractedStuff 条目弄乱了捆绑，因为它必须将minChunks 设置为1。必须删除该条目：我不能像那样组合提取的CSS。

我自己尝试构建一个插件来组合 CSS，但这样做的问题是它不会去重复：你会得到多个 CSS 副本。

相反，这似乎工作得很好，取自 Mini-Css-Extract-Plugin 建议。

      cacheGroups: {
            mainJS: {
                test: /\.js$/,
                name: "commons",
                chunks: "all",
                minChunks: 2,
                minSize: 0,
                priority: 20,
                enforce: true
            },
            extractedCSS: {
                test: (module, chunks) => module.constructor.name === 'CssModule',
                name: "commons",
                chunks: "all",
                enforce: true
            }
        }
于 2018-06-14T09:04:13.350 回答