webpack 完全指南：代码压缩

站长

2023年07月28日 21:12 · 阅读数 18

前端构建编译代码时，压缩代码也是很重要的，压缩后的代码体积减小，传输速度快，从而提升网页加速速度和减少网络传输流量。除此之外，还具有 混淆源码 的作用，由于压缩后的代码可读性非常差，就算别人下载到了网页的代码，也大大增加了代码分析和改造的难度。

压缩 JS

目前最成熟的 JavaScript 代码压缩工具是 UglifyJS，它会分析 JavaScript 代码语法树，理解代码含义，从而能做到诸如去掉无效代码、去掉日志输出代码、缩短变量名等优化。

在 webpack v4 中，uglifyjs-webpack-plugin 是被默认集成在生产模式中的。所以，默认打包出的 JS 文件就是压缩好的，如果你需要更多的自定义也可以对 uglifyjs-webpack-plugin 进行配置。

首先，安装uglifyjs-webpack-plugin：

npm install uglifyjs-webpack-plugin --save-dev

然后，添加到你的 webpack 配置中：

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports = {
  optimization: {
    minimizer: [new UglifyJsPlugin()],
  },
};

uglifyjs-webpack-plugin 的可配置项：

test：测试匹配的文件，默认值：/\.js(\?.*)?$/i

module.exports = {
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        test: /\.js(\?.*)?$/i,
      }),
    ],
  },
};

include：要被处理的文件。
exclude：不被处理的文件。

chunkFilter：判断哪些 chunk 可以被压缩（默认所有的 chunk 都会被压缩）。返回值为 true 则会被压缩，false 则不会被压缩。

module.exports = {
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        chunkFilter: (chunk) => {
          // `vendor` 块不压缩
          if (chunk.name === "vendor") {
            return false;
          }

          return true;
        },
      }),
    ],
  },
};

cache：启动文件缓存，默认为 false，默认的缓存目录路径：node_modules/.cache/uglifyjs-webpack-plugin。
parallel：使用多进程并行运行以提高构建速度，默认为 false，推荐开启。
sourceMap：使用源映射将错误信息位置映射到模块（这将会减慢编译速度），默认为 false。
uglifyOptions：UglifyJS 压缩配置选项。

压缩 CSS

CSS 代码也可以像 JS 那样被压缩，目前比较成熟可靠的 CSS 压缩工具是 cssnano，cssnano 是能理解 CSS 代码的含义，而不仅仅是删掉空格，例如：

对于 webpack v5 或更高版本，官方推荐使用 CssMinimizerWebpackPlugin，该插件是使用 cssnano 优化和压缩 CSS，支持缓存和并发模式下运行。

首先，我们需要安装 css-minimizer-webpack-plugin：

npm install css-minimizer-webpack-plugin --save-dev

接着在 webpack 配置中加入该插件：

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  // ...
  optimization: {
    minimizer: [
      // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
      `...`,
      new CssMinimizerPlugin(),
    ],
  },
};

压缩 HTML

HtmlWebpackPlugin 插件除了可以帮助我们简化 HTML 文件的创建，也可以压缩 HTML 文件。

首先，需要先安装 HtmlWebpackPlugin 插件：

npm install --save-dev html-webpack-plugin

添加到 webpack 配置文件中：

// webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");

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

如果不添加任何配置的话，会生成一个默认 index.html 文件，并自动注入所有的 chunk 和压缩。

也可以通过自定义配置参数，以下几个是常见的参数：

template：模板的路径，默认会去寻找 src/index.ejs 是否存在。
filename：输出文件的名称，默认为 index.html。
inject：是否将资源注入到模版中，默认为 true。
minify：压缩参数。在生产模式下（production），默认为 true；否则，默认为false。

如果 minify 为 true，生成的 HTML 将使用 html-minifier-terser 和以下选项进行压缩：

{
  collapseWhitespace: true,
  keepClosingSlash: true,
  removeComments: true,
  removeRedundantAttributes: true,
  removeScriptTypeAttributes: true,
  removeStyleLinkTypeAttributes: true,
  useShortDoctype: true
}

webpack 系列

转载自:https://juejin.cn/post/7031115698633965582