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 期间就不是这样了。

（编辑：湖南网）

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