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生成的

忽略核心和主要，因为它们是其他捆绑包。

homeUS是flexslider导入的文件-就我的HomeUS.html而言，我打算引用所有这些js文件吗？还是webpack的内部组件，我只引用HomeUs.js和flexslider.js，它们都可以正常工作？

我假设其中一些是flexslider依赖项 您可能会告诉我，我不是Webpack专家-这个想法似乎是，回访者只需更改单个npm软件包（如果他们已更改）就可以下载，而不必下载庞大的“供应商”捆绑包。

谢谢

Answer 1

这样，您需要在html中引用所有它们。如果要让js文件调用其他文件并仅根据需要加载它们，请查看动态import（）语法。同样在我看来，这种硬核捆绑拆分是过大的。也许只是将它们拆分为大块和普通块。