javascript - 了解 SplitChunksPlugin 与 Webpack 的集成

Question

我对 webpack 还很陌生，我正在寻找一些优化。目前我正在使用 SplitChunksPlugin 来拆分共享的 node_modules。

    splitChunks: {
        cacheGroups: {
            commons: {
                test: /[\\/]node_modules[\\/]/,
                name: "vendors",
                chunks: "all"
            }
        }
    }

目前我有两个入口点入口：{一个：“./one-main.js”，两个：“./two-main.ts”}，

所以在我的 dist 文件夹中，我现在得到了一个 dev.vendors.bundle.js。

当我重新加载浏览器时，我可以看到 one-main.js 和 two.main.js 的大小显着减小。但是，我还需要在我的 html 文件中包含 dev.vendors.bundle.js，并且该文件的大小抵消了我在其他两个文件上所做的任何节省。我的理解（这可能是错误的）是这两个捆绑包应该在 prod 中具有发布哈希（在文件名中）（因此不会被浏览器缓存）。然而 node_modules 的内容不太可能改变，因此 dev.vendors.bundle.js 不应该有发布哈希，因此会被浏览器缓存。这是正确的还是我离题了？我已经阅读了几个教程，但仍然无法理解它！任何帮助，将不胜感激。

标签： javascriptangularwebpack