UglifyJS原理

AST, 抽象语法树

1. 将code转换成AST
   2. 将AST进行优化，生成一个更小的AST
   3. 将新生成的AST再转化成code

https://www.h5w3.com/19480.html

UglifyJS是什么？

UglifyJS 是代码压缩工具（通过分析JS代码语法树）。具体如：

• 去掉无用代码
• 去掉日志输出代码
• 缩短变量名

参考：
https://segmentfault.com/a/1190000016231512

常用插件

uglifyjs-webpack-plugin （封装 UglifyJS 实现压缩）

是webpack插件。https://www.npmjs.com/package/uglify-js

使用

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
  plugins: [
    // 压缩输出的 JS 代码
    new UglifyJSPlugin({
      compress: {
        // 在UglifyJs删除没有用到的代码时不输出警告
        warnings: false,
        // 删除所有的 `console` 语句，可以兼容ie浏览器
        drop_console: true,
        // 内嵌定义了但是只用到一次的变量
        collapse_vars: true,
        // 提取出出现多次但是没有定义成变量去引用的静态值
        reduce_vars: true,
      },
      output: {
        // 最紧凑的输出
        beautify: false,
        // 删除所有的注释
        comments: false,
      }
    }),
  ],

ParallelUglifyPlugin（多进程并行处理压缩）

https://xbhub.gitee.io/wiki/webpack/4%E4%BC%98%E5%8C%96/4-4%E4%BD%BF%E7%94%A8ParallelUglifyPlugin.html

UglifyESPlugin（压缩 ES6）

cssnano（压缩css, css-loader内置通常压缩率能达到 60%）

    rules: [
      {
        test: /\.css/,// 增加对 CSS 文件的支持
        // 提取出 Chunk 中的 CSS 代码到单独的文件中
        use: ExtractTextPlugin.extract({
          // 通过 minimize 选项压缩 CSS 代码
          use: ['css-loader?minimize']
        }),
      },
    ]