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

有了这个基本的 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('@', '')}`;  
          },  
        },  
      },  
    },  
  },  
}; 

（编辑：西安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!