如何通过 Code Splitting 优化 Webpack 打包体积

当我们在使用 Webpack 打包前端应用时，打包体积是一个非常重要的问题，这直接影响到网页的加载速度，不仅会影响用户体验，还会影响网页的 SEO 优化。而 Code Splitting 是一种优化打包体积的方式，通过将大的代码包拆分成多个小的代码包，可以实现优化打包体积的效果。

什么是 Code Splitting

Code Splitting 是指将代码分割成多个小的代码块，这些小的代码块可以分别加载和执行，这样就可以优化应用程序的加载速度和性能。在 Webpack 中，可以通过一些特定的配置来实现代码分割。

Code Splitting 的实现方式

手动实现

在手动实现 Code Splitting 时，需要你手动将代码块拆分成多个小的代码块，并将这些代码块按照一定的规则进行组合。这种方式的优点是具有很高的灵活性，可以根据实际情况进行手动调整，但是需要手动编写代码实现，而且不够直观和简便。

自动实现

Webpack 提供了自动实现 Code Splitting 的机制，可以通过配置 Webpack 的 mode 属性来实现。具体来说，可以通过使用 Webpack 提供的插件或者内置的 optimization.splitChunks 属性来实现。

其中 optimization.splitChunks 属性是指将代码块自动拆分出来，并将这些代码块和原来的代码块进行合并，从而实现代码的优化。

Code Splitting 的示例代码

假设我们的项目结构如下：

./src
|-- common.js
|-- pageA.js
|-- pageB.js

我们可以将 common.js 拆分出来，这样可以减少 pageA.js 和 pageB.js 的体积。我们首先在 Webpack 中添加 optimization.splitChunks 属性，如下：

optimization: {
  splitChunks: {
    chunks: "all",
    name: "common"
  }
}

上述代码中，将所有代码块都拆分成小的代码块，并将这些代码块合并到一个名为 common 的代码包中。

我们还需要在 pageA.js 和 pageB.js 中通过 import 的方式来引入 common.js，如下：

import("./common.js").then(common => {
  // 使用 common 中的函数
});

通过使用 import 动态加载 common.js，我们就可以实现 Code Splitting 的目的，从而优化打包体积。

总结

通过 Code Splitting，我们可以将大的代码包拆分成多个小的代码包，从而实现优化打包体积的效果，减少网页的加载时间和提升用户体验。Code Splitting 的实现方式可以是手动实现或者自动实现，我们可以通过 Webpack 的 optimization.splitChunks 属性来实现自动实现 Code Splitting。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6480767248841e9894fe9104