webpack 压缩文件

2024-12-11

webpack

JS 压缩

Webpack 5 自带 TerserWebpackPlugin来进行代码压缩，在 mode 为 production 时开启。也就是说，我们不用做任何操作，就能得到一份压缩后的代码。

Webpack 默认配置如下：

D(optimization, "minimize", production);
A(optimization, "minimizer", () => [
  {
    apply: compiler => {
      // Lazy load the Terser plugin
      const TerserPlugin = require("terser-webpack-plugin");
      new TerserPlugin({
        terserOptions: {
          compress: {
            passes: 2
          }
        }
      }).apply(compiler);
    }
  }
]);

terser-webpack-plugin使用 terser 来压缩代码，更多配置参数可以查看 terser 的配置https://terser.org/docs/options/

Webpack 4 则自带 uglifyjs-webpack-plugin 这个插件进行压缩。如果从webpack4 的 uglifyjs 升级到webpack5，还是推荐使用 terser 进行压缩。

Terser vs. UglifyJS

形同体积的代码，测试两者的压缩速度

	Terser	UglifyJS
无缓存	13min	35min
有缓存	1min	3min

可以发现，Terser 比 UglifyJS 快 3 倍。数据见 https://github.com/webpack-contrib/terser-webpack-plugin/issues/15

压缩插件为什么在 optimization.minimizer 中

terser-webpack-plugin 作为一个插件，可以写到 plugin 配置中。

但是，webpack 推荐配置到 optimization.minimizer 下，这样可以通过 optimization.minimize 配置控制，只有打开才会生效。

HTML 压缩

Html 的操作，我们主要通过 webpack-html-plugin 来处理。具体的配置可以查看https://webfem.com/post/webpack-common-plugin。

{
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  plugins: [new HtmlWebpackPlugin({
    title: 'My App',
    filename: 'assets/admin.html',
    minify: true
  })]
}

其中 minify 控制是否压缩 html，默认在 production 环境下为 true

CSS 压缩

CSS 压缩需要两个插件配置进行

mini-css-extract-plugin：负责提取 CSS 文件，让 CSS 独立于 JavaScript。其只在webpack5以上生效，低版本需要使用 extract-text-webpack-plugin
css-minimizer-webpack-plugin：负责压缩 CSS 文件，优化其大小。

生产环境中，先用 mini-css-extract-plugin 提取 CSS，再用 css-minimizer-webpack-plugin 压缩提取的 CSS 文件。

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
  optimization: {
    minimizer: [
      `...`, // 使用默认的 JavaScript 压缩工具
      new CssMinimizerPlugin(), // 添加 CSS 压缩
    ],
  },
};

原文地址：https://webfem.com/post/webpack-assets-mini，转载请注明出处

« 免费 CDN

nginx 配置 »