我在《記一次有點兒複雜的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資源包的出現。
該問題有兩種方法解決：
- 添加es6轉es5的相關依賴及配置；
- 將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，效果還是很明顯的。