细说 js 压缩、sourcemap、通过 sourcemap 查找原始报错信息

细说 js 压缩、sourcemap、通过 sourcemap 查找原始报错信息

1. js 压缩

js 压缩对前端开发者来说是一门必修课。

一般来说，压缩 js 主要出于以下两个目的：

1. 减小代码体积，加快前端资源加载速度
2. 保护源代码不被别人获取

压缩 js 使用的工具库：

• UglifyJS2: 压缩 es5
• uglify-es: 压缩 es6+
• closure-compiler、closure-compiler-js: google 的 js 压缩、优化工具

压缩 js 的主要过程：

1. 移除无用代码
2. 混淆代码中变量名称、函数名称等
3. 预编译代码
4. 对结构进行扁平化处理

1. 移除无用代码

去掉所有对解析引擎来说无用的字符，包括空格、注释、换行、没有用的变量声明、函数声明等。

2. 混淆代码中变量名称、函数名称等

把一些局部变量名称、函数名称等用 a, b, ...、$1, $2, ...、_1, _2, ... 之类的简略字符进行替换，达到混淆的目的。

源代码

(function () {
  var hello = 'hi';
  var print = function (str) {
    console.log(str);
  };

  print(hello);
})();

压缩后的代码（仅演示混淆功能）

(function () {
  var a = 'hi';
  var b = function (c) {
    console.log(c);
  };

  b(a);
})();

3. 预编译代码

把不依赖外部环境的逻辑提前进行运算，并把运算结果替换到相应的源码处，然后从源码中移除这段逻辑。

源代码

(function () {
  var hello = 'hi' + ' everyone, ';
  var count = 3 * 5;

  console.log(hello + count + ' girls');
})();

压缩后的代码（仅演示预编译功能）

(function () {
  var hello = 'hi everyone, ';
  var count = 15;

  console.log(hello + count + &