[webpack] 如何优化产物大小【热度: 521】

[yanlele]

关键词：webpack 产物大小优化

在使用 Webpack 进行项目构建时，减少包体积是提升加载速度、改善用户体验的关键措施之一。以下是一些通用的方法和技巧来减小构建结果的包体积：

1. 使用 Tree Shaking

Tree Shaking 是一个通过清除未引用代码（dead-code）的过程，可以有效减少最终包的大小。确保你的代码使用 ES6 模块语法（import 和 export），因为这允许 Webpack 更容易地识别并删除未被使用的代码。

在 webpack.config.js 中设置 mode 为 production 可自动启用 Tree Shaking。

2. 启用压缩(Uglification)

Webpack 通过压缩输出文件来减小包大小，如删除未使用的代码、缩短变量名等。确保在生产环境中启用了 UglifyJS 插件或 TerserPlugin。

const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        /* 附加选项 */
      }),
    ],
  },
};

3. 代码分割(Code Splitting)

通过代码分割，你可以把代码分成多个 bundle，然后按需加载，从而减少初始加载时间。Webpack 提供了多种分割代码的方式，最常见的是动态导入（Dynamic Imports）。

import(/* webpackChunkName: "my-chunk-name" */ "path/to/myModule").then((module) => {
  // 使用module
});

4. 使用 Externals 减轻体积

通过配置 externals 选项，可以阻止 Webpack 将某些 import 的包打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖。

module.exports = {
  externals: {
    jquery: "jQuery",
  },
};

5. 利用缓存(Caching)

使用 [contenthash] 替换 [hash] 或 [chunkhash] 来为输出文件命名，这确保了只有当文件内容改变时，文件名称才会改变，可以更好地利用浏览器缓存。

output: {
  filename: '[name].[contenthash].js',
}

6. 移除未使用的 CSS

使用 PurgeCSS 或purify-css等工具检查你的 CSS 文件，自动去除未使用的 CSS，可以极大地压缩 CSS 的体积。

const PurgecssPlugin = require("purgecss-webpack-plugin");

7. 优化图片

使用image-webpack-loader等图片压缩插件，可以减小图片文件的体积。

module: {
  rules: [
    {
      test: /\.(png|svg|jpg|jpeg|gif)$/i,
      use: [
        'file-loader',
        {
          loader: 'image-webpack-loader',
          options: {
            // 配置选项
          },
        },
      ],
    },
  ],
}

8. 使用动态 Polyfills

只为那些实际需要它们的浏览器提供 polyfills，而不是所有浏览器都提供。

以上方法和技巧可以根据项目的具体需求和情况灵活使用，有的方法可能会对构建和重构现有代码产生较大影响，因此在采用前应评估其必要性和影响。

9. 高版本浏览器直接使用 es6 代码

将代码编译（或者说不编译）为 ES6（ECMAScript 2015）或更高版本的 JavaScript 代码，确实可以减少产物体积。