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

Alice 仍然会每周重新下载 200 KB 的 main.js 文件，并且在第一次访问时仍会下载 200 KB 的npm包，但她绝不会两次下载相同的包。

总共： 2.24 MB.

与基线相比减少了44%，这对于一些可以从博客文章中复制/粘贴的代码来说非常酷。

我想知道是否有可能超过 50% ? 这完全没有问题。

分离应用程序代码的区域

让我们转到 main.js 文件，可怜的 Alice 一次又一次地下载这个文件。

我之前提到过，我们在此站点上有两个不同的部分：产品列表和产品详细信息页面。 每个区域中的唯一代码为25 KB（共享代码为150 KB）。

我们的产品详情页面现在变化不大，因为我们做得太完美了。 因此，如果我们将其做为单独的文件，则可以在大多数时间从缓存中获取到它。

另外，我们网站有一个较大的内联SVG文件用于渲染图标，重量只有25 KB，而这个也是很少变化的， 我们也需要优化它。

我们只需手动添加一些入口点，告诉 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 时代就不是这样了。

（编辑：ASP站长网）