代码压缩

前言

1. 为什么要进行代码压缩

减少代码体积；破坏代码的可读性，提升破解成本；

2. 什么时候要进行代码压缩

生产环境

3. 使用什么压缩工具

目前最流行的代码压缩工具主要有两个：UglifyJs和Terser

UglifyJs是一个传统的代码压缩工具，已存在多年，曾经是前端应用的必备工具，但由于它不支持ES6语法，所以目前的流行度已有所下降。

Terser是一个新起的代码压缩工具，支持ES6+语法，因此被很多构建工具内置使用。webpack安装后会内置Terser，当启用生产环境后即可用其进行代码压缩。

因此，我们选择Terser

关于副作用 side effect

副作用：函数运行过程中，可能会对外部环境造成影响的功能

如果函数中包含以下代码，该函数叫做副作用函数:

• 异步代码
• localStorage
• 对外部数据的修改

如果一个函数没有副作用，同时，函数的返回结果仅依赖参数，则该函数叫做纯函数(pure function)

//这就是一个纯函数，在压缩的时候，该代码会直接被删除掉,因为不论合适调用，返回结果都是不变的
function sum(a, b) {
  return a + b;
}
sum(1, 3);

//这就不是一个纯函数，因为每一次调用结果都会产生变动
function sum(a, b) {
  const c = Math.random();
  return a + b + c;
}

Terser

在Terser的官网可尝试它的压缩效果

Terser 官网：https://terser.org/

webpack+Terser

webpack 自动集成了 Terser

如果你想更改、添加压缩工具，又或者是想对 Terser 进行配置，使用下面的 webpack 配置即可

const TerserPlugin = require("terser-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
  optimization: {
    // 是否要启用压缩，默认情况下，生产环境会自动开启
    minimize: true,
    minimizer: [
      // 压缩时使用的插件，可以有多个
      new TerserPlugin(),
      new OptimizeCSSAssetsPlugin(),
    ],
  },
};
``;

最佳实践

src/index.js

import "./index.css";

const a = "abc";
const b = "bcd";
const c = a + b;

src/index.css

/* 想要对css进行压缩就得去webpack配置optimize-css-assets-webpack-plugin这个插件 */
body {
  background-color: #666;
}

webpack.config.js

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
  mode: "production",
  module: {
    rules: [
      { test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"] },
    ],
  },
  optimization: {
    // 是否要启用压缩，默认情况下，生产环境会自动开启,设置true,则开发环境下也开启压缩
    // minimize: true,
    minimizer: [
      // 压缩时使用的插件，可以有多个
      new TerserPlugin(),
      new OptimizeCSSAssetsPlugin(),
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: "[name].[hash:5].css",
    }),
    new HtmlWebpackPlugin(),
  ],
  stats: {
    colors: true,
    chunks: false,
    modules: false,
  },
};

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "dev": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.4.2",
    "html-webpack-plugin": "^4.0.0-beta.11",
    "mini-css-extract-plugin": "^0.9.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "terser-webpack-plugin": "^2.3.5",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
  }
}