前端性能优化之js代码压缩（http请求里出现的一个5.5M的js包）

我在《记一次有点儿复杂的streamsets与自己开发模块集成的过程》里介绍过将streamsets集成到自己项目里的做法，开放出去之后不久就被吐槽页面加载太慢了。因为开发时都是在本地测试，基本都是瞬间加载出来，没有特别关注加载性能问题，上线后发现加载很慢，偶尔还会出现超时导致页面加载失败的情况，查了一下原因，发现竟然有一个5.5M的js包要加载！

资源包太大经常出现以下问题：

1、页面加载慢

 2、资源加载失败

这种情况是必须要进行优化的。

在本地打包测试，发现有如下报错：

打开target/dist/assets下的该文件，在提示的位置发现了如下代码：

/*
    从浏览器的url中获取参数的值
*/
var urlParse = function(windowObj, param) {
  let params = decodeURIComponent(windowObj.location.hash).substr(1);
  let val = params.substr(params.indexOf(`${param}=`)).split('&')[0].split('=');
  if (val && val.length > 1) { return val[1]; }
  params = decodeURIComponent(windowObj.location.search).substr(1);
  val = params.substr(params.indexOf(`${param}=`)).split('&')[0].split('=');
  if (val && val.length > 1) { return val[1]; }
  return null;
};

再通过查Gruntfile.js的配置，就发现了问题所在，原来streamsets的Gruntfile里并没有将es6语法转为es5的配置，导致grunt-contrib-uglify在压缩代码时出错，但是并没有阻止代码的继续编译，只是简单将该文件跳过压缩这一步骤，这就导致了5.5M资源包的出现。

该问题有两种方法解决：

1. 添加es6转es5的相关依赖及配置；
2. 将es6代码换成es5的写法。

因为streamsets是开源代码，代码里只有很少一部分自己写的es6语法代码，所以选择了第二种方法进行解决。

这里推荐两个在线ES6代码转ES5代码的转换工具：

1.Babel，在线转换地址 ；

2.Traceur，Google公司出品，在线转换地址

上述代码转换结果如下：

var urlParse = function (windowObj, param) {
  var params = decodeURIComponent(windowObj.location.hash).substr(1);
  var val = params.substr(params.indexOf("".concat(param, "="))).split('&')[0].split('=');
  if (val && val.length > 1) {
    return val[1];
  }
  params = decodeURIComponent(windowObj.location.search).substr(1);
  val = params.substr(params.indexOf("".concat(param, "="))).split('&')[0].split('=');
  if (val && val.length > 1) {
    return val[1];
  }
  return null;
};

再打包会发现这个js包只有不到2.3M：

竟然还有2.3M！加载速度依旧很慢。

但是和GitHub上拉的代码直接打包对比，文件大小几乎是一样的，只能从其它角度考虑进一步优化。

后来选择开启gZip压缩，再看页面加载速度就比较愉快了：

至此，这个问题算是解决了，将加载时间从近50s优化到了1s，效果还是很明显的。