前言

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

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

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

生产环境

  1. 使用什么压缩工具

目前最流行的代码压缩工具主要有两个:UglifyJs和Terser
UglifyJs是一个传统的代码压缩工具,已存在多年,曾经是前端应用的必备工具,但由于它不支持ES6语法,所以目前的流行度已有所下降。
Terser是一个新起的代码压缩工具,支持ES6+语法,因此被很多构建工具内置使用。webpack安装后会内置Terser,当启用生产环境后即可用其进行代码压缩。
因此,我们选择Terser
关于副作用 side effect
副作用:函数运行过程中,可能会对外部环境造成影响的功能
如果函数中包含以下代码,该函数叫做副作用函数:

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

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

  1. pure_funcs:["Math.random","sum"]

Terser

在Terser的官网可尝试它的压缩效果
Terser官网:https://terser.org/

webpack+Terser

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

  1. const TerserPlugin = require('terser-webpack-plugin');
  2. const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
  3. module.exports = {
  4. optimization: {
  5. // 是否要启用压缩,默认情况下,生产环境会自动开启
  6. minimize: true,
  7. minimizer: [ // 压缩时使用的插件,可以有多个
  8. new TerserPlugin(),
  9. new OptimizeCSSAssetsPlugin()
  10. ],
  11. },
  12. };

无法访问到的代码:DCE
例:

  1. if (ture) {
  2. console.log(1);
  3. }
  4. else{
  5. console.log(2);
  6. }