Optimize JavaScript execution and parse time using optimize-js

Transcript

1. afu @ 研發中⼼前端組
 @afutseng Optimize JavaScript execution and parse time using optimize-js
 styleMe 會議室∘2016.09.30
2. optimize-js https://github.com/nolanlawson/optimize-js Optimize a JavaScript file for faster initial load by wrapping eagerly-invoked functions 2016/9/18 建⽴的專案 2016/9/20 釋出 v1.0.1 最新版 作者：Nolan Lawson Web Platform PM @ Microsoft Edge 
3. ⽤法: 
 optimize-js input.js > output.js  範例輸出 !(function (){})() function runIt(fun){ fun() } runIt((function (){})) 範例輸⼊ !function (){}() function runIt(fun){ fun() } runIt(function (){})
4. Benchmark overview
 效能評⽐
5. 四⼤名瀏平均速度提昇      3FGFSFODF
   IUUQTHJUIVCDPNOPMBOMBXTPOPQUJNJ[FKTCFODINBSLPWFSWJFX
6. jQuery v3.1.0 
 Minified v.s. Min+Optimized      3FGFSFODF
   IUUQTHJUIVCDPNOPMBOMBXTPOPQUJNJ[FKTCFODINBSLPWFSWJFX NT
 NT NT
   NT NT
   
 NT NT
   
 NT
7. ⾃⼰做 React 的 benchmark v15.3.2
8. 無痛安裝 React •使⽤ Facebook 出品的 Create React App •https://github.com/facebookincubator/create-react-app $ npm install -g create-react-app $ create-react-app afu-react-test-app $ cd afu-react-test-app/ $ npm start 
9. 無痛安裝 React (續) •開發版本本地端網址 • http://localhost:3000/ ! •打包發佈版本 $ npm run build ! 47.18 KB build/static/js/main.c9763294.js 289 B build/static/css/main.9a0fe4f1.css 
10. 以 PHP 7 內建 web server 
 佈署網站 $ php -S localhost:8888 PHP 7.1.0-dev Development Server started at Fri Sep 30 01:41:41 2016 Listening on http://localhost:8888 Document root is /Users/citeair/lab/afu-react-test-app/build Press Ctrl-C to quit. [Fri Sep 30 01:41:48 2016] ::1:58054 [200]: / [Fri Sep 30 01:41:48 2016] ::1:58055 [200]: /static/css/main.9a0fe4f1.css [Fri Sep 30 01:41:48 2016] ::1:58056 [200]: /static/js/main.c9763294.js 
11. 以 PHP 7 內建 web server 
 佈署網站 
12. 以 Chrome 55 (Canary) 瀏覽 
13. 模擬五倍慢低端裝置做 Profiling 
14. Speed improvement ~25% x  NT NT
15. 原理？ •多數 JavaScript engine 會做 lazy parsing optimization •根據經驗法則，⼤部分的 function 永遠不會或是稍後才被執⾏ •可能不適⽤於 framework-based application，因為打包過的 code 都是 必定會執⾏的 /* 直到 f 被呼叫時才剖析 function 內容 */ function f () { … } •若外部 scope 有⽤變數參照 f，f 會被解析兩次 •優化版，不做 lazy parsing (function f () {...})() 
16. demo by @bmaurer function immutable () { (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.Immutable = factory()); }(this, function () { ... }); }  71BSTF-B[Z
 NT 71BSTF-B[Z
 NT IUUQTHJUIVCDPNSPMMVQSPMMVQQVMMJTTVFDPNNFOU
17. demo by @bmaurer function immutableOptimize () { (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.Immutable = factory()); }(this, (function () { ... })); }  71BSTF-B[Z
 NT IUUQTHJUIVCDPNSPMMVQSPMMVQQVMMJTTVFDPNNFOU
18. 有得必有失 •jQuery v3.1.0：30450 -> 30524 bytes，增加 74 bytes •Lodash v4.15.0： 24528 -> 24577 bytes，增加 49 bytes •React v15.3.2 + Create React App：160518 -> 160609 bytes，增加 91 bytes 
19. Lodash 作者表⽰： •9/20 發布 v4.16.1，改良解析時間兩倍  IUUQTHJUIVCDPNMPEBTIMPEBTIDPNNJUDCDD
20. Lodash 作者表⽰：  IUUQTHJUIVCDPNMPEBTIMPEBTIDPNNJUDCDD
21. ⼩結 • 在 V8 引擎有進⼀步優化以前，很適合在 uglify 後再串接 optimize-js 
 打包，輕易地換取 JavaScript 
 解析/執⾏時間縮短
22. References  1. https://github.com/nolanlawson/optimize-js 2. https://github.com/mishoo/UglifyJS2/issues/886 3. https://github.com/rollup/rollup/pull/774 4. https://github.com/lodash/lodash/wiki/ Changelog#v4161 5. https://github.com/lodash/lodash/commit/ 5c912bcc62d385084cf7f9a13b5ac850a7e72be0
23. 感謝聆聽 @afutseng