Webpack 是一个强大的模块打包工具，可以将多个模块打包成一个文件。但是，如果我们的应用程序非常大，那么打包后的文件可能会非常大，这会影响页面加载时间。为了解决这个问题，我们可以使用 webpack 的代码分割功能来将应用程序分割成多个小块，这样可以减少首次加载时间，并提高应用程序的性能。
什么是代码分割？
代码分割是将应用程序分割成多个小块，以便能够按需加载。这意味着在页面加载时，只有必要的代码被加载，而不是将整个应用程序一次性加载到浏览器中。这样可以减少首次加载时间，并提高应用程序的性能。
代码分割实践
1. 使用 import()
Webpack 4 推出了一个新的函数 import()，可以用来异步加载模块。这个函数会返回一个 Promise 对象，当模块加载完成后，Promise 对象会被 resolve，返回模块的 exports 对象。
import('./module').then(module => {
// 使用 module
})使用 import() 可以将应用程序分割成多个小块，并在需要时按需加载。例如，我们可以将路由模块分割成一个单独的块，并在用户访问该路由时加载该块。
-- -------------------- ---- -------
------ - ----- - ---- ------------------
----- ---- - -- -- ----------------
----- ----- - -- -- -----------------
----- --- - -- -- -
--------
-----
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------
---------
-2. 使用 require.ensure()
在 Webpack 4 之前，我们可以使用 require.ensure() 函数来实现代码分割。这个函数接受三个参数：要分割的模块、模块的名称和一个回调函数。当模块加载完成后，回调函数会被调用。
require.ensure(['./module'], function(require) {
const module = require('./module')
// 使用 module
})使用 require.ensure() 可以将应用程序分割成多个小块，并在需要时按需加载。例如，我们可以将路由模块分割成一个单独的块，并在用户访问该路由时加载该块。
-- -------------------- ---- -------
------ - ----- - ---- ------------------
------------------ ----------------- -
----- ---- - -----------------
----- ----- - ------------------
----- --- - -- -- -
--------
-----
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------
---------
-
--3. 使用 SplitChunksPlugin
Webpack 还提供了一个插件 SplitChunksPlugin，可以自动将代码分割成多个小块。这个插件会将公共模块提取到一个单独的块中，并且可以根据需要将其他模块分割成多个小块。
-- -------------------- ---- -------
-- -----------------
-------------- - -
------------- -
------------ -
------- ------
----- -----
------------ -
-------- ------
-------- ------
------- -
----- -------------------------
----- ---------
------- -----
-
-
-
-
-使用 SplitChunksPlugin 可以自动将应用程序分割成多个小块，并在需要时按需加载。例如，我们可以将公共模块提取到一个单独的块中，并在用户访问该路由时加载该块。
-- -------------------- ---- -------
------ - ----- - ---- ------------------
----- ---- - -- -- ----------------
----- ----- - -- -- -----------------
----- --- - -- -- -
--------
-----
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------
---------
-代码分割优化
代码分割可以提高应用程序的性能，但是如果不正确使用，可能会导致一些问题。以下是一些代码分割的优化技巧：
1. 按需加载
按需加载可以减少首次加载时间，并提高应用程序的性能。使用 import() 或 require.ensure() 函数可以实现按需加载。
2. 使用 SplitChunksPlugin
使用 SplitChunksPlugin 插件可以自动将应用程序分割成多个小块，并在需要时按需加载。这个插件会将公共模块提取到一个单独的块中，并且可以根据需要将其他模块分割成多个小块。
3. 避免重复加载
如果一个模块已经加载过了，那么再次加载该模块是没有必要的。可以使用 optimization.runtimeChunk 配置选项来提取运行时代码到一个单独的块中，避免重复加载。
// webpack.config.js
module.exports = {
optimization: {
runtimeChunk: 'single'
}
}4. 压缩代码
压缩代码可以减少文件大小，并提高应用程序的性能。可以使用 UglifyJSPlugin 插件来压缩代码。
// webpack.config.js
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
optimization: {
minimizer: [new UglifyJSPlugin()]
}
}结论
代码分割是提高应用程序性能的一种有效方法。Webpack 提供了多种代码分割方式，可以根据应用程序的需求选择合适的方式。同时，我们还可以使用代码分割优化技巧来进一步提高应用程序的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6769160498e3e1ab1a8b557f