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

拟定向用户提供文件的最佳方法也许是一项棘手的事变。 有许多差异的场景，差异的技能，差异的术语。

在这篇文章中，我但愿给你全部你必要的对象，这样你就可以:

1.  相识哪种文件支解计策最得当你的网站和用户
2.  知道怎么做

按照 Webpack glossary，有两种差异范例的文件支解。 这些术语听起来可以交流，但显然不是。

Webpack 文件疏散包罗两个部门，一个是 Bundle splitting，一个是 Code splitting:

•  Bundle splitting: 建设更多更小的文件，并行加载，以得到更好的缓存结果，首要浸染就是使赏识器并行下载，进步下载速率。而且运用赏识器缓存，只有代码被修改，文件名中的哈希值改变了才会去再次加载。
•  Code splitting：只加载用户最必要的部门，别的的代码都遵从懒加载的计策，首要的浸染就是加速页面的加载速率，不加载不须要的代码。

第二个听起来更吸引人，不是吗?究竟上，关于这个题目的很多文章好像都假设这是建造更小的JavaScript 文件的惟一值得的环境。

但我在这里要汇报你的是，第一个在许多网站上都更有代价，应该是你为全部网站做的第一件事。

就让我们一探毕竟吧。

Bundle splitting

bundle splitting 背后的头脑很是简朴，假如你有一个庞大的文件，而且变动了一行代码，那么用户必需再次下载整个文件。可是假如将其分成两个文件，那么用户只必要下载变动的文件，赏识器将从缓存中提供另一个文件。

值得留意的是，因为 bundle splitting 都是关于缓存的，以是对付第一次会见来说没有什么区别。

(我以为太多关于机能的接头都是关于第一次会见一个站点，或者部门缘故起因是“第一印象很重要”，部门缘故起因是它很好、很轻易权衡。

对付常常会见的用户来说，量化机能加强所带来的影响也许较量棘手，可是我们必需举办量化!

这将必要一个电子表格，因此我们必要锁定一组很是特定的情形，我们可以针对这些情形测试每个缓存计策。

这是我在前一段中提到的环境:

•  Alice 每周会见我们的网站一次，一连 10 周
•  我们每周更新一次网站
•  我们每周城市更新我们的“产物列表”页面
•  我们也有一个“产物具体信息”页面，但我们今朝还没有开拓
•  在第 5 周，我们向站点添加了一个新的 npm 包
•  在第 8 周，我们更新了一个现有的 npm 包

某些范例的人(好比我)会实行让这个场景尽也许的真实。不要这样做。现实环境并不重要，稍后我们将找出缘故起因。

基线

假设我们的 JavaScript 包的总容量是400 KB，今朝我们将它作为一个名为 main.js 的文件加载。

我们有一个 Webpack 设置如下(我省略了一些无关的设置):

// webpack.config.js   
const path = require('path')  
module.exports = {  
  entry: path.resolve(__dirame, 'src/index.js')  
  output: {  
    path: path.resolve(__dirname, 'dist'),  
    filename: '[name].[contenthash].js'  
  }  
} 

对付那些新的缓存粉碎：任何时辰我说 main.js，我现实上是指 main.xMePWxHo.js，个中内里的字符串是文件内容的散列。这意味着差异的文件名 当应用措施中的代码产生变动时，从而逼迫赏识器下载新文件。

每周当我们对站点举办一些新的变动时，这个包的 contenthash 城市产生变革。因此，Alice 每周都要会见我们的站点并下载一个新的 400kb 文件。

假如我们把这些变乱做成一张表格，它会是这样的。

也就是10周内， 4.12 MB, 我们可以做得更好。

解析 vendor 包

让我们将包分成 main.js 和 vendor.js 文件。

 // webpack.config.js   
const path = require('path')  
module.exports = {  
  entry: path.resolve(__dirname, 'src/index.js'),  
  output: {  
    path: path.resolve(__dirname, 'dist'),  
    filename: '[name].[contenthash].js',  
  },  
  optimization: {  
    splitChunks: {  
      chunks: 'all'  
    }  
  }  
} 

Webpack4 为你做最好的工作，而没有汇报你想要怎样拆分包。这导致我们对 webpack 是怎样分包的知之甚少，功效有人会问 “你到底在对我的包裹做什么？”

添加 optimization.splitChunks.chunks ='all'的一种说法是 “将 node_modules 中的全部内容放入名为 vendors~main.js 的文件中”。

（编辑：河北网）

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