拆分 JavaScript 块的最佳方法

如何解决拆分 JavaScript 块的最佳方法

我在如何拆分我的 javascript 包方面进退两难。

假设捆绑包为 1000kb。我的直觉告诉我，我应该将它分成尽可能多的相同大小的块，直到拥有一个非常小的块的开销会导致收益递减。这是假设我们可以从同时并行地为每个块发出请求中受益，因此如果我们同时启动它们，我们最好最小化最大块的大小。

因此，这会导致将其分成 100 个 10kb 的块。

同时，100 个块对我来说似乎很多。也许浏览器无法同时处理那么多请求。

所以，这里看起来有几个参数：

• 块数
• 块的相对大小

两者应该如何优化？有没有额外的参数？

我当前的拆分如下所示：

这是从以下生成的：

  optimization: {
    usedExports: true,splitChunks: {
      chunks: 'all',maxInitialRequests: 8,minSize: 200000,maxSize: 500000,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('@','')}`;
        },},

无论我如何调整上述数字，块都不会遵循这些界限。我怎样才能让他们遵守自己的界限？这些边界是用什么单位定义的（解析/压缩大小）？如何摆脱生成的非常小的块？

解决方法

将块视为每页需要加载的文件，浏览器每个域的请求限制为 ~6 个请求，因此，如果您的页面需要下载更多文件，则会使加载速度变慢.

另一个重点是浏览器缓存，如果块在浏览器中长期缓存，则块的大小无关紧要，因为它将从缓存中提供。这意味着尺寸不是那么重要的因素。 什么影响缓存？您应该将代码分成随时间变化较多的部分和很少随时间变化的部分。例如，您的组件/样式可能会更改多于 antd 依赖库。

最后一点，您可以考虑在某些用户交互后需要加载的所有块，因为它们不会影响您的页面加载速度（因为它们仅在用户交互后加载）。