0

我一直在研究 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 包（如果它们已更改）而不是巨大的“供应商” ' 捆。

谢谢

4

1 回答 1

1

这样你需要在 html 中引用所有这些。如果您希望 js 文件调用其他文件并仅在需要时加载它们，请查看动态 import() 语法。在我看来，这种硬核捆绑拆分也太过分了。也许只是将它们拆分为捆绑块和普通块。

于 2019-05-04T09:29:34.540 回答