Webpack 是前端工程化最重要的工具之一，其主要作用是将不同类型的资源转换为可在浏览器中使用的代码，并将它们打包成几个文件，以便于优化加载性能。在 Webpack4 中，代码分离和按需加载成为其重要的特性之一。
什么是代码分离
在 Webpack 中，代码分离指的是将代码拆分成多个块，以实现按需加载，只有当需要时才会被加载。通过代码分离，可以实现更快的页面加载速度和更好的用户体验。
如何实现代码分离
Webpack4 提供了两种实现代码分离的方式：使用内置的 optimization.splitChunks 和使用第三方插件。
使用内置的 optimization.splitChunks
在 Webpack4 中，optimization.splitChunks 可以自动将所有公共模块提取到单独的块中。只需要在 webpack 配置文件中加入以下代码即可实现代码分离：
optimization: {
splitChunks: {
chunks: 'all',
},
},这个配置会将所有的公共模块提取到一个单独的块中，并将其命名为 vendors。Webpack 会自动分析代码并将其拆分成块，以实现最小化的初始加载时间。
使用第三方插件
如果您需要更加灵活的配置，可以考虑使用第三方分离插件。这里介绍两种分离插件：CommonsChunkPlugin 和 SplitChunksPlugin。
CommonsChunkPlugin
CommonsChunkPlugin 插件可以将公共代码提取到一个共享块中。与 optimization.splitChunks 不同的是，CommonsChunkPlugin 可以手动配置哪些模块提取到共享块中。以下是使用 CommonsChunkPlugin 插件的示例代码：
new webpack.optimize.CommonsChunkPlugin({
name: 'commons',
filename: 'commons.js',
chunks: ['page1', 'page2'],
}),上面的代码会将 page1 和 page2 中公共的模块提取到 commons.js 中。
SplitChunksPlugin
SplitChunksPlugin 是在 Webpack4 中新增的插件，用于代替 CommonsChunkPlugin。它的主要作用是将代码拆分成块，并将公共代码提取到单独的块中。以下是使用 SplitChunksPlugin 插件的示例代码：
-- -------------------- ---- -------
------------- -
------------ -
------- ------
-------- ------
-------- --
---------- --
----------------- --
------------------- --
----------------------- ----
----- -----
------------ -
-------- -
----- -------------------------
--------- ---
--
-------- -
---------- --
--------- ----
------------------- ----
-
-
--
--上面的代码会将所有模块分离成块，并将公共代码提取到名为 vendors 的块中。还可以通过 cacheGroups 属性进一步配置要提取的模块。该配置将所有类库从 node_modules 目录下提取到 vendors 块中。默认情况下，只有当块被引用两次或以上才会被提取。
如何实现按需加载
按需加载指的是在需要时才加载代码块。通过按需加载，可以提高页面加载速度和用户体验。
Webpack4 内置的动态导入和 import() 方法可以帮助我们实现按需加载。
使用动态导入
动态导入是 webpack 内置的功能，可以让我们在运行时动态加载代码块。以下是使用动态导入的示例代码：
import('./page1').then(module => {
console.log(module.default());
});上面的代码会在运行时动态加载 page1 模块，并输出其默认的导出。
使用 import() 方法
import() 方法是 ES6 新增的语言特性，可以让我们在运行时动态加载模块。与动态导入相似，import() 方法可以帮助我们实现按需加载。以下是使用 import() 方法的示例代码：
const loadPage1 = () => import('./page1');
loadPage1().then(module => {
console.log(module.default());
});上面的代码会在运行时动态加载 page1 模块，并输出其默认的导出。
结论
通过使用 Webpack4 提供的代码分离和按需加载特性，我们可以优化页面加载性能和用户体验。无论是使用内置的 optimization.splitChunks 还是第三方分离插件，都可以根据项目需求实现更加灵活的配置。
我们应该充分利用动态导入和 import() 方法，以实现按需加载，避免加载过多无用的代码，提高页面加载速度。
希望以上的分析和示例能够帮助读者更好地掌握 Webpack4 的代码分离和按需加载特性，从而更好地进行前端工程化开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670b948f66ef9cf37faa501f