【性能优化】Terser压缩js代码

📚 webpack v5 terser插件 文档

代码

	// vue-cli是默认开启Terser的，webpack则需要手动开启
const TerserWebpackPlugin = require("terser-webpack-plugin");

module.exports = {
  // ...
  optimization: {
    minimize: true,
    minimizer: [
			new TerserWebpackPlugin({
				// test: /\.js(\?.*)?$/i, //用来匹配需要压缩的文件，默认所有js文件
				// include: /\/includes/, //匹配参与压缩的文件。
				// exclude: /\/excludes/, //匹配不需要压缩的文件
				cache: true, //降版本后添加
				sourceMap: false, //降版本后添加
				parallel: true, //使用多进程并发运行以提高构建速度。 并发运行的默认数量： os.cpus().length - 1 。
				extractComments: true, //是否将注释剥离到单独的文件中,默认值： true
				terserOptions: {
					ecma: undefined,
					warnings: false,
					parse: {},
					compress: {
						drop_console: true,
						drop_debugger: false,
						pure_funcs: ["console.log"] // 移除console
					}
				}
			})
    ],
  },
};

打包产物分析

以下仅为测试Terser压缩（不分包不使用gzip）,大文件的压缩率看来在30%-50%之间。

• 开启Terser压缩前，打包产物体积为 79.1 M。
  • 入口文件 app.js 6391 kb。
  • 最大依赖 monaco-editor 4173 kb。
• 开启Terser压缩后，打包产物体积为 60.0 M。
  • 入口文件 app.js 2953 kb。
  • 最大依赖 monaco-editor 1555 kb。