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

我们只需手动添加一些入口点，告诉 Webpack 为每个项创建一个文件。

module.exports = {  
  entry: {  
    main: path.resolve(__dirname, 'src/index.js'),  
    ProductList: path.resolve(__dirname, 'src/ProductList/ProductList.js'),  
    ProductPage: path.resolve(__dirname, 'src/ProductPage/ProductPage.js'),  
    Icon: path.resolve(__dirname, 'src/Icon/Icon.js'),  
  },  
  output: {  
    path: path.resolve(__dirname, 'dist'),  
    filename: '[name].[contenthash:8].js',  
  },  
  plugins: [  
    new webpack.HashedModuleIdsPlugin(), // so that file hashes don't change unexpectedly  
  ],  
  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 还会为 ProductList 和 ProductPage 之间共享的内容创建文件，这样我们就不会得到重复的代码。

这将为 Alice 在大多数情况下节省 50 KB 的下载。

只有 1.815 MB!

我们已经为 Alice 节省了高达56％的下载量，这种节省将（在我们的理论场景中）持续到时间结束。

所有这些都只在Webpack配置中进行了更改——我们没有对应用程序代码进行任何更改。

我在前面提到过，测试中的确切场景并不重要。这是因为，无论你提出什么场景，结论都是一样的:将应用程序分割成合理的小文件，以便用户下载更少的代码。

很快，=将讨论“code splitting”——另一种类型的文件分割——但首先我想解决你现在正在考虑的三个问题。

#1：大量的网络请求不是更慢吗?

答案当然是不会。

在 HTTP/1.1 时代，这曾经是一种情况，但在 HTTP/2 时代就不是这样了。

（编辑：晋中站长网）

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