在 Web 开发中，前端性能一直是一个重要的话题。为了提高用户体验，我们通常会采用一些优化手段，比如使用 webpack 的 Code Splitting 技术，将代码切割成多个 chunks，实现按需加载。本文将详细介绍 webpack 的 Code Splitting 技术，包括其原理、代码实现及优化方案。
什么是 Code Splitting
在前端开发中，我们通常会将代码打包成一个 bundle 后加载到浏览器中，但是这样做会导致一个问题：每次加载整个 bundle，即使用户只访问了部分页面也要加载全部代码，导致页面加载速度较慢。Code Splitting 技术则可以解决这个问题，它可以将代码分割成多个 chunks，实现按需加载，从而提高页面加载速度和用户体验。
Code Splitting 的原理
Code Splitting 技术的核心是将代码分割成多个 chunks，将某些代码块移到单独的文件中，按需加载。webpack 通过内置的 SplitChunksPlugin 来实现代码分割。这个插件会根据一些策略将代码拆分成多个 chunks，比如：
- 按需加载：将某些代码块移到按需加载的文件中（通过使用
import()或者require.ensure()实现）。 - 公共代码：将所有 chunk 中重复的代码提取到单独的文件中，再让多个 chunk 共享这个文件（避免重复加载）。
- 缓存组：根据需要可以自定义缓存组来分割 chunk，比如将所有同步加载的第三方库提取到 vendor chunk 中。
Code Splitting 的实现
动态导入
webpack 中可以使用 ES2015 规范中的动态导入（Dynamic Import），将某些代码块移动到单独的文件中。例如：
import('./moduleA').then(moduleA => {
// ...
})上面的代码会将 moduleA 单独移到一个 chunk 中，并且只有在需要时才会加载该模块。
require.ensure
另外一种实现 Code Splitting 的方式是使用 require.ensure()。这个方法是 webpack 提供的，并且在 webpack 3.x 中可以使用。
require.ensure(['./moduleA'], (require) => {
const moduleA = require('./moduleA')
// ...
})这里，我们指定了一个依赖项（./moduleA），只有需要时才会加载。同样的，该方法也会将 moduleA 移到单独的 chunk 中并按需加载。
SplitChunksPlugin
webpack 的内置插件 SplitChunksPlugin 可以对代码进行拆分和优化。
首先，在配置文件中，我们可以使用 optimization.splitChunks 属性来配置代码分割的规则：
-- -------------------- ---- -------
-------------- - -
-- ---
------------- -
------------ -
------- -------- -- ----------
-------- ------ -- --------
-------- ------- -- --------
---------- -- -- ----------
----------------- -- -- -------------
------------------- -- -- ------------
----------------------- ---- -- ------
----- ----- -- ---------- ----- --- ---- ----
------------ -
-------- - -- ----- ------------ ------ ------- ----- -
----- -------------------------
--------- ---
--
-------- - -- -- ------------ - ---------- --------- ------ ----- -
---------- --
--------- ----
------------------- ----
-
-
-
-
-Code Splitting 的优化
虽然 Code Splitting 技术可以优化前端性能，但是它也可能导致某些问题，如增加了 HTTP 请求次数、产生了额外的计算开销等。因此，在实际应用中，我们需要进行一些优化。
缓存优化
我们可以针对不同的 chunk 设置不同的缓存时间或者版本号，从而避免重复加载相同的 chunk。此外，我们可以使用 contenthash 来生成文件名，这样仅当文件内容发生变化时，才会重新打包该文件。
output: {
filename: 'js/[name].[contenthash].js',
chunkFilename: 'js/[name].[contenthash].chunk.js',
...
}预加载和预解析
为了避免某些代码无法执行，我们可以通过预加载和预解析的方式来解决。预加载可以在指定时间之前请求所需的资产，预解析则是在后台下载和解析指定资产，而不阻塞异步请求。
-- -------------------- ---- -------
-- -------
----- -
-
---- ----------
----- ---------------------------------------------------------------------------
--- -------
--
-
---- ----------
----- -------------------------------------------------------------------------
--- -------
-
-
-- --------
----- -------------- -------------------------按需加载
我们可以根据用户真正需要的代码，将其单独移到一个 chunk 中，只有当用户真正需要时才加载。
import(/* webpackPrefetch: true */ 'LoginButtonByName')
总结
Code Splitting 技术可以将代码分割成多个 chunks，实现按需加载，从而提高前端性能和用户体验。webpack 的 SplitChunksPlugin 可以实现代码分割，并且提供了很多优化策略。在实际应用中，我们需要进行一些优化，如缓存、预加载和按需加载等，从而实现最佳的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d1f21ab5eee0b52594b5ff