Web性能优化： 使用Webpack分离数据的正确方法(2)

有了这个基本的 bundle splitting，Alice 每次访问时仍然下载一个新的 200kb 的 main.js，但是在第一周、第8周和第5周只下载 200kb 的 vendor.js (不是按此顺序)。

总共：2.64 MB。

减少36％。 在我们的配置中添加五行代码并不错。 在进一步阅读之前，先去做。 如果你需要从 Webpack 3 升级到 4，请不要担心，它非常简单。

我认为这种性能改进似乎更抽象，因为它是在10周内进行的，但是它确实为忠实用户减少了36%的字节，我们应该为自己感到自豪。

但我们可以做得更好。

分离每个 npm 包

我们的 vendor.js 遇到了与我们的 main.js 文件相同的问题——对其中一部分的更改意味着重新下载它的所有部分。

那么为什么不为每 个npm 包创建一个单独的文件呢?这很容易做到。

所以把 react、lodash、redux、moment 等拆分成不同的文件:

const path = require('path');  
const webpack = require('webpack');  
module.exports = {  
  entry: path.resolve(__dirname, 'src/index.js'),  
  plugins: [  
    new webpack.HashedModuleIdsPlugin(), // so that file hashes don't change unexpectedly  
  ],  
  output: {  
    path: path.resolve(__dirname, 'dist'),  
    filename: '[name].[contenthash].js',  
  },  
  optimization: {  
    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 有一些不太聪明的默认设置，比如分割输出文件时最多3个文件，最小文件大小为30 KB（所有较小的文件将连接在一起），所以我重写了这些。
•  cacheGroups 是我们定义 Webpack 应该如何将数据块分组到输出文件中的规则的地方。这里有一个名为 “vendor” 的模块，它将用于从 node_modules 加载的任何模块。通常，你只需将输出文件的名称定义为字符串。但是我将 name 定义为一个函数(将为每个解析的文件调用这个函数)。然后从模块的路径返回包的名称。因此，我们将为每个包获得一个文件，例如 npm.react-dom.899sadfhj4.js。
•  NPM 包名称必须是 URL 安全的才能发布，因此我们不需要 encodeURI 的 packageName。 但是，我遇到一个.NET服务器不能提供名称中带有 @(来自一个限定范围的包)的文件，所以我在这个代码片段中替换了 @。
•  整个设置很棒，因为它是一成不变的。 无需维护 - 不需要按名称引用任何包。

（编辑：ASP站长网）