译文：https://medium.com/dailyjs/we...背景代码切分是前端性能优化中非常常见的一种优化方法。说到代码拆分，往往离不开webpack中的一个配置，就是splitChunks。现在很多项目都使用webpack4，webpack4舍弃了之前的commonChunkPlugin，增加了SplitChunksPlugin。对于这个插件，它的option选项有三个值：initialasyncall。对于这三个值，即使是工作多年的老司机也能记得清清楚楚，能分清的不多。最近也在做性能优化。简单的几行配置，白屏时间缩短了近600ms，非常喜人。before:after:Load时间从2.3s减少到1.57s，这还不错。具体的分析过程和优化方法我会在下一篇实战文章中介绍。回到正题，我们先了解一下基本原理。正文部分翻译自Medium，原文地址：https://medium.com/dailyjs/we...这是我粗略的尝试，通过一个普通的例子来理解和帮助大家使用SplitChunksPlugin选项。作为早期的爱好者，我试图了解代码拆分背后的魔力。文档说splitChucnks可以接受三个合法值，分别是：initialasyncall。我有些疑惑，好奇心更加高涨。我深入研究了文档的Github历史和WebpackOptions概要，发现：“有3个可能的值”initial、“async”和“all”。配置时，优化仅选择初始块、按需块或所有块。—GithubHistory《Selectchunksfordeterminingsharedmodules(defaultsto"async","initial"and"all"requiresaddingthesechunkstotheHTML)》—WebpackOptionsSchema这里的思路是让a.js和b.js都有入口文件然后引用相同的node_modules。其中一些模块将被动态导入以测试Code-Spliting的行为。我们使用WebpackBundleAnalyzerPlugin来帮助我们了解我们的node_modules是如何拆分的。a.js：仅导入lodashdynamicallyb.js：我选择这个配置的主要原因是为了理解当有一个公共库时Webpack配置的行为：在一个入口文件中动态导入，而不是在另一个-React在两个入口文件中动态导入-lodash在两个入口文件-jquery中都是动态引入的，我们会保持这些文件不变，通过chunks的值来改变webpack的配置1.chunks:async—对async模块的优化打包后的结构：chunks:asynctellswebpack：“嘿，webpack！我只关心动态导入模块的优化。你可以保留非动态模块”现在，让我们一步一步看看发生了什么：webpack将从b.js中提取react并将其移动到一个新文件，但保持a.js中的react不变。此优化仅适用于动态模块。import('react')语句生成一个单独的文件import'react'不会。webpack从a.js中提取lodash并移动到一个新文件，该文件也被b.js引用。这里jquery就不做优化了，虽然a.js和b.js都引用了。2.chunks:initial—SyncModule打包后的优化：chunks:initialtellwebpack:hey,webpack!我不关心动态导入的模块，你可以为每个模块创建单独的文件。但是，我希望将所有非动态导入的模块放在一个包中，尽管它们还需要导入其他非动态导入的块，并且我准备好与其他文件共享和分块我的非动态导入的模块。现在，让我们逐步看看会发生什么：a.js中的react将移动到node_vendors~a.bundle.js。b.js中的react将移至0.bundle.jsa.js，b.js中的lodash将移至1.bundle.js。为什么？因为这是一个动态导入的模块。jquery是一个非动态导入的公共模块，将被移动到node_vendorsab.bundle.js并由a.js和b.js共享。3.chunks:all—Async和SyncModule的优化打包后：chunks:all告诉webpack：嘿，webpack！我不在乎这是否是一个动态导入的模块。优化它们。但要确保……你足够聪明，可以做到这一点。现在，我们一步步来看：react在a.js中是一个非动态导入的模块，在b.js中是动态导入的。所以它转到一个文件0.bundle.js，这将被两者引用。lodash在两个文件中都是动态导入的，所以它显然得到一个单独的文件1.bundle.jsjquery是非动态导入的，所以它转到公共共享模块node_vendorsab.bundle.js并将被两者引用。可以看出，选择不同的值会直接影响webpack的打包行为，导致不同的结果。今天在看这部分文档，发现有这么一段描述：Providingallcanbespecificallypowerful，因为这意味着即使在异步和非异步chunk之间也可以共享chunk。官方的说法简直不要太明显。但是如何选择不同的值才能达到最好的效果呢？我们将在下一篇文章中对此进行详细分析。今天的文章就这些了，希望对大家有所帮助，谢谢大家。如果您觉得该内容对您很有启发，您可以点击“在看”，让更多人看到该内容。关注公众号《前端e进阶》掌握前端面试重点难点，公众号后台回复“加群”与小伙伴聊技术。更多精彩：《面试三轴》HTTP（下）《面试三轴》HTTP（上）《面试三轴》缓存（下）《面试三轴》缓存（上）《面试三轴》本框架之“三采访之轴”
