33. 代码压缩

前言

分包只会把公共代码提取出去,并不会进行压缩,在大的项目中,大的模块还是会导致体积太大,增加传输的成本

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

减少单模块代码的体积;破坏代码的可读性,提升破解成本

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

生产环境

1. 使用什么工具

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

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

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

因此我们选择Terser

Terser

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

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

关于副作用

副作用: 函数运行中,可能会对外部的环境造成影响的功能

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

如果函数中没有包含以下代码,则该函数叫做副作用函数

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

  webpack+Terser

webpack自动集成了terser,webpack的默认配置,已经是几乎最优秀的配置了

如果你想更改,添加压缩工具,又或者想对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()
    ],
  },
};