在现代 Web 应用中，前端 JavaScript 代码的体积日益庞大，加载速度也越来越慢，影响用户的体验。为了解决这个问题，需要对 JavaScript 代码进行优化，其中一项重要的优化策略是代码分割。
在 Next.js 中，我们可以使用多种代码分割方案。本文将详细介绍 Next.js 中 JavaScript 模块的代码分割方案，包括：
- 静态导入
- 动态导入
- 提取公共代码
- 基于路由的代码分割
静态导入
静态导入是指在编译时就把某个 JavaScript 模块分割成多个独立的块，以便于浏览器加载和缓存。静态导入在 Next.js 中是默认启用的，你可以通过配置 next.config.js 文件中的 webpack 属性来调整它的行为。
静态导入的一个重要应用场景是公共代码提取。如果你在多个页面中使用了相同的 JavaScript 模块，那么这些模块就会被打包成一个公共块，以便于浏览器缓存和重复使用。你可以通过配置 splitChunks 来控制公共块的生成。
下面是一个简单的示例：
-- -------------------- ---- ------- -- -------------- ------ ----- ---- ------- ------ - ---- - ---- -------- -------- ---------- - ----- --- - -------------- --------- - -- ------ ---------------- - ------ ------- --------
在这个例子中，我们使用了 lodash 库中的 join 函数来拼接字符串，这个函数是静态导入的。当我们编译这个页面时，Next.js 会自动将 lodash 库中的代码提取成一个公共块，以便于多个页面共享。你可以在浏览器的开发工具中查看这个公共块。
动态导入
动态导入是指在运行时根据需要才加载某个 JavaScript 模块，以减少页面的初始加载时间。在 Next.js 中，你可以使用 import() 函数来实现动态导入。当你使用 import() 导入一个模块时，Webpack 会将这个模块单独打包成一个块，并在需要时再异步加载它。
下面是一个使用动态导入的示例：
-- -------------------- ---- -------
-- --------------
------ ------ - -------- - ---- -------
-------- ---------- -
----- ------ -------- - ---------------
-------- ------------- -
------------------------------------ -- -
-----------------------------
-------------
--
-
------ -
-----
------- -------------------------------------
----- -- -----------------------
------
-
-
------ ------- --------在这个例子中，我们使用了 import() 函数异步加载了一个名为 dynamic.js 的模块，并在加载成功后才显示它的内容。当我们编译这个页面时，Next.js 会将 dynamic.js 单独打包成一个块，并在需要时再加载它。你可以在浏览器的开发工具中查看这个块的加载情况。
提取公共代码
在上面的示例中，我们介绍了一种提取公共代码的方法，即使用 splitChunks 配置项控制公共块的生成。但是，如果你的应用中有一些通用的代码，你可能希望将它们单独打包成一个库，以便于多个项目共享。
在 Next.js 中，你可以使用 externals 配置项将共享的库从应用中剥离出来。你只需要将库打包成 UMD 格式，并在应用中以 script 标签的形式引入它即可。
下面是一个使用 externals 配置项的示例：
// next.config.js
module.exports = {
externals: {
react: 'React',
'react-dom': 'ReactDOM',
}
}在这个例子中，我们将 react 和 react-dom 从应用中剥离出去，以便于多个项目共享。注意，我们在应用中仍需要手动引入这些库，以便于它们能够在浏览器中运行。
基于路由的代码分割
在一些大型的应用中，不同的页面可能依赖于不同的 JavaScript 模块，如果将所有的模块都打包在一起，可能会导致页面加载速度变慢。为了减少不必要的加载，我们可以使用基于路由的代码分割。
基于路由的代码分割是指根据不同的路由将 JavaScript 模块打包成多个独立的块，以便于浏览器加载和缓存。在 Next.js 中，你可以使用 dynamic 函数来实现基于路由的代码分割。
下面是一个使用 dynamic 函数的示例：
-- -------------------- ---- ------- -- -------------- ------ ------- ---- -------------- ----- ---------------- - ---------- -- ------------------------------ -------- ---------- - ------ ---------------------- -------- - ------ ------- --------
在这个例子中，我们使用 dynamic 函数动态导入了一个名为 Hello 的组件，并将它包装在了 DynamicComponent 中。当用户访问这个页面时，浏览器只会加载与这个页面相关的 JavaScript 模块，以减少初始加载时间。你可以在浏览器的开发工具中查看这些模块的加载情况。
总结
代码分割是前端优化的重要策略之一，它可以减少 JavaScript 代码的加载时间，提升用户的体验。在 Next.js 中，我们可以使用多种代码分割方案，包括静态导入、动态导入、提取公共代码和基于路由的代码分割。使用这些方案，可以帮助我们更好地优化 JavaScript 代码，提高页面的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64884b9348841e98946d0726