Web机能优化: 行使Webpack疏散数据的正确要领
副问题[/!--empirenews.page--]
拟定向用户提供文件的最佳方法也许是一项棘手的事变。 有许多差异的场景,差异的技能,差异的术语。 在这篇文章中,我但愿给你全部你必要的对象,这样你就可以:
按照 Webpack glossary,有两种差异范例的文件支解。 这些术语听起来可以交流,但显然不是。 Webpack 文件疏散包罗两个部门,一个是 Bundle splitting,一个是 Code splitting:
第二个听起来更吸引人,不是吗?究竟上,关于这个题目的很多文章好像都假设这是建造更小的JavaScript 文件的惟一值得的环境。 但我在这里要汇报你的是,第一个在许多网站上都更有代价,应该是你为全部网站做的第一件事。 就让我们一探毕竟吧。 Bundle splitting bundle splitting 背后的头脑很是简朴,假如你有一个庞大的文件,而且变动了一行代码,那么用户必需再次下载整个文件。可是假如将其分成两个文件,那么用户只必要下载变动的文件,赏识器将从缓存中提供另一个文件。 值得留意的是,因为 bundle splitting 都是关于缓存的,以是对付第一次会见来说没有什么区别。 (我以为太多关于机能的接头都是关于第一次会见一个站点,或者部门缘故起因是“第一印象很重要”,部门缘故起因是它很好、很轻易权衡。 对付常常会见的用户来说,量化机能加强所带来的影响也许较量棘手,可是我们必需举办量化! 这将必要一个电子表格,因此我们必要锁定一组很是特定的情形,我们可以针对这些情形测试每个缓存计策。 这是我在前一段中提到的环境:
某些范例的人(好比我)会实行让这个场景尽也许的真实。不要这样做。现实环境并不重要,稍后我们将找出缘故起因。 基线 假设我们的 JavaScript 包的总容量是400 KB,今朝我们将它作为一个名为 main.js 的文件加载。 我们有一个 Webpack 设置如下(我省略了一些无关的设置):
对付那些新的缓存粉碎:任何时辰我说 main.js,我现实上是指 main.xMePWxHo.js,个中内里的字符串是文件内容的散列。这意味着差异的文件名 当应用措施中的代码产生变动时,从而逼迫赏识器下载新文件。 每周当我们对站点举办一些新的变动时,这个包的 contenthash 城市产生变革。因此,Alice 每周都要会见我们的站点并下载一个新的 400kb 文件。 假如我们把这些变乱做成一张表格,它会是这样的。 也就是10周内, 4.12 MB, 我们可以做得更好。 解析 vendor 包 让我们将包分成 main.js 和 vendor.js 文件。
Webpack4 为你做最好的工作,而没有汇报你想要怎样拆分包。这导致我们对 webpack 是怎样分包的知之甚少,功效有人会问 “你到底在对我的包裹做什么?” 添加 optimization.splitChunks.chunks ='all'的一种说法是 “将 node_modules 中的全部内容放入名为 vendors~main.js 的文件中”。 (编辑:河北网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |