Webpack 打包后文件过大，如何优化-JavaScript中文网-JavaScript教程资源分享门户

Webpack 打包后文件过大，如何优化

Webpack 是现代 Web 开发中不可或缺的工具，它可以帮助我们自动化构建、打包和优化 Web 应用程序，简化开发流程，提高开发效率。但是，Webpack 能够打包文件的大小有限制，所以当打包输出的文件过大时，需要考虑优化。

本文将介绍几种减小 Webpack 打包后文件大小的方法。

按需加载

打包时需要将所有的代码都打进一个文件，所以文件大小很容易变大。为了解决这个问题，我们可以使用按需加载。按需加载是指不将整个应用程序的所有代码都打包到一个文件中，而是将代码拆分成多个模块，可以在需要的时候加载。这样就可以减少初始下载体积，提高页面性能。

在 React 项目中，我们可以使用 react-router 的按需加载功能。具体方法如下：

-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ ------ - ---- -------------------
------ -------- ---- -----------------

----- ---- - ---------- ------- -- -- ----------------- -------- ------- ---
----- ----- - ---------- ------- -- -- ------------------ -------- ------- ---
----- ------- - ---------- ------- -- -- -------------------- -------- ------- ---

----- --- - -- -- -
  --------
    ------ ----- -------- ---------------- --
    ------ ------------- ----------------- --
    ------ --------------- ------------------- --
  ---------
--

------ ------- ----

上面的代码中，我们使用了 react-loadable 库来实现按需加载。首先，我们将需要异步加载的组件包装在 Loadable 中，然后在 Route 中使用这些组件。

代码压缩

另一个减小文件大小的方法是压缩代码。Webpack 提供了 UglifyJS Plugin 来压缩 JavaScript 代码。该插件会将你的代码压缩成混淆过的代码，包括删除无用的代码、压缩变量和函数名等，从而减小代码体积。

我们可以通过以下方法引入 UglifyJS Plugin：

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  plugins: [
    new UglifyJSPlugin(),
  ],
};

使用 Tree Shaking

Tree Shaking 是一个功能强大的技术，可以去除应用程序中未使用的代码。它的原理是通过静态分析代码并标记哪些代码未被使用，然后在打包中将它们删除。

在 Webpack 中，我们可以使用 babel-preset-env 和 uglifyjs-webpack-plugin 来实现 Tree Shaking。需要在 .babelrc 中添加 "modules": false。

-- -------------------- ---- -------
-
  ---------- -
    -
      ------ -
        ---------- ------
        ---------- -
          ----------- ------ - ---------- ------- -- ---
        -
      -
    -
  -
-

使用 Code Splitting

Code Splitting 是将一个应用程序拆分成多个模块的技术。这种做法可以减小初始下载体积，提高应用程序的性能。Webpack 和 React 都支持 Code Splitting。

Webpack 可以通过配置实现 Code Splitting。具体方法是将应用程序拆分成多个 entry points，每个 entry point 对应一个 JavaScript 文件。Webpack 可以将这些文件分别打包成多个文件，然后在浏览器中加载。

-- -------------------- ---- -------
-------------- - -
  ------ -
    ---- ---------------
    ------- --------- ------------ ----------
  --
  ------- -
    --------- ------------------------
    ----- --------- - --------
  --
  ------------- -
    ------------ -
      ------- ------
      ----- ---------
    --
  --
--

使用文件压缩插件

Webpack 提供了多个文件压缩插件，其中比较常用的两种是 gzip 和 brotli。

Gzip 是一种使用广泛的压缩算法，可以将文件体积减小到原来的 70% 左右。在服务器端启用 Gzip 压缩功能后，可以显著提高 Web 应用程序的性能，减少网络传输的数据量。

在 Webpack 中启用 Gzip 压缩可以通过 compression-webpack-plugin 插件实现。具体方法是在 Webpack 配置文件中添加以下代码：

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  plugins: [
    new CompressionPlugin(),
  ],
};

Brotli 是 Google 开发的一种新的压缩算法，可以将文件体积减小到原来的 30% 左右，相比 Gzip 有更好的压缩效率。在服务器端启用 Brotli 压缩功能后，可以进一步优化 Web 应用程序的性能。

在 Webpack 中启用 Brotli 压缩可以通过 brotli-webpack-plugin 插件实现。具体方法是在 Webpack 配置文件中添加以下代码：

const BrotliPlugin = require('brotli-webpack-plugin');

module.exports = {
  plugins: [
    new BrotliPlugin(),
  ],
};

其他优化

除了上述方法之外，还可以通过其他方式优化 Webpack 打包后文件大小。例如：

将图片和字体等资源文件进行压缩。
移除不必要的插件和库。
对 CSS 进行压缩和按需加载。
设置合适的 chunk size 来减少打包后的文件数量。

总结

Webpack 打包后文件过大是 Web 开发中一个常见的问题，但是我们可以通过按需加载、代码压缩、Tree Shaking、Code Splitting 和文件压缩等方法来优化。通过上述优化，可以减小 Web 应用程序的体积，提高应用程序的性能和用户体验。

参考资料

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