压缩代码

浏览器从服务器访问网页时获取的 JavaScript、CSS 资源都是文本形式的，文件越大网页加载时间越长。

为了提升网页加速速度和减少网络传输流量，可以对这些资源进行压缩。

压缩的方法除了可以通过 GZIP 算法对文件压缩外，还可以对文本本身进行压缩

压缩 JavaScript

目前最成熟的js压缩工具是UglifyJS

UglifyJs配置

• sourceMap：是否为压缩后的代码生成对应的 Source Map，默认为不生成，开启后耗时会大大增加。一般不会把压缩后的代码的 Source Map 发送给网站用户的浏览器，而是用于内部开发人员调试线上代码时使用。

• beautify： 是否输出可读性较强的代码，即会保留空格和制表符，默认为是，为了达到更好的压缩效果，可以设置为 false。

• comments：是否保留代码中的注释，默认为保留，为了达到更好的压缩效果，可以设置为 false。

• compress.warnings：是否在 UglifyJs 删除没有用到的代码时输出警告信息，默认为输出，可以设置为 false 以关闭这些作用不大的警告。

• drop_console：是否剔除代码中所有的 console 语句，默认为不剔除。开启后不仅可以提升代码压缩效果，也可以兼容不支持 console 语句 IE 浏览器。

• collapse_vars：是否内嵌定义了但是只用到一次的变量，例如把 var x = 5; y = x 转换成 y = 5，默认为不转换。为了达到更好的压缩效果，可以设置为 true。

• reduce_vars： 是否提取出出现多次但是没有定义成变量去引用的静态值，例如把 x = 'Hello'; y = 'Hello' 转换成 var a = 'Hello'; x = a; y = b，默认为不转换。为了达到更好的压缩效果，可以设置为 true。

  也就是说，在不影响代码正确执行的前提下，最优化的代码压缩配置为如下

module.exports = {
	plugins: [
    new UglifyJsPlugin({
      compress: {
        // 在uglifyJS删除无用的代码时不输出警告
        warning: false,
        // 去取console.log
        drop_console: true,
        // 提取出现多次，但是没有定义成变量的静态值
        reduce_vars: true,
        //内嵌定义了只用到了一次的变量
        collapse_vars: true,
      },
      output: {
        // 紧凑输出
        beautify: false,
        // 去除注释
        comments: false,
      }
    })
  ]
}

压缩ES6

运行 ES6 的代码相比于转换后的 ES5 代码有如下优点：

• 一样的逻辑用 ES6 实现的代码量比 ES5 更少。
• JavaScript 引擎对 ES6 中的语法做了性能优化，例如针对 const 申明的变量有更快的读取速度