Webpack优化splitChunks生成的webpack文件

Question

我一直在研究webpack的捆绑策略，并在这里找到了一个很好的指南：https://hackernoon.com/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758

它似乎主张多个单独的文件(通常)是最好的方法。我已经创建了一个简单的捆绑包，其中包含一个导入flexslider的js文件：

import "flexslider"
$(window).on('load', function () {
$('.flexslider').flexslider({

 });
});

显然，flexslider位于node_modules文件夹中，而我的webpack配置被设置为拆分npm包：

 runtimeChunk: 'single',
        splitChunks: {
            chunks: "all",
            maxInitialRequests: Infinity,
            minSize: 0,
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name(module) {
                        // get the name. E.g. node_modules/packageName/not/this/part.js
                        // or node_modules/packageName
                        const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

                        // npm package names are URL-safe, but some servers don't like @ symbols
                        return `npm.${packageName.replace('@', '')}`;
                    },
                },
            }

现在，对于这个相当简单的场景，这里是webpack生成的

​

​

忽略core和main，因为它们是其他包。

homeUS是执行flexslider导入的文件--就我的HomeUS.html而言，我是否应该引用所有这些js文件？或者是一些内部的webpack和我只是引用HomeUs.js和flexslider.js，这一切都只是“工作”？

我假设其中一些是flexslider依赖项，因为你可能会看出我不是一个webpack专家--我的想法似乎是，返回的访问者只需下载单独的npm包，如果他们进行了更改，而不是一个巨大的‘供应商’捆绑包。

谢谢

Answer 1

这样，您需要在html中引用所有它们。如果您希望js文件调用其他文件并仅在需要时加载它们，请查看dynamic import()语法。同样，在我看来，这种核心的捆绑包拆分是矫枉过正的。也许只是将它们分成捆绑块和公共块。