你的 JS 該減肥了！５個提升網頁載入速度的技巧 - Modern Web 2020
0 likes189 views
本文件介绍了五个提高网页加载速度的技巧，包括使用代码拆分、动态导入及树摇等方法来优化闯补惫补厂肠谤颈辫迟包的大小，从而提升用户体验和加载速度。强调了利用测速工具进行优先级决策和颁顿狈版本的使用，以减少整体下载量。最终结果显示，通过这些优化，网页加载时间平均减少30%。
你的 JS 該減肥了！５個提升網頁載入速度的技巧 - Modern Web 2020
- 1. 按?下以編輯?片標題樣式 按?下以編輯?片?標題樣式 我是趙勗博 Shubo 歐姆雷特 資深前端?程師 FB: Shubo 寫個 Code Find me at shubochao@gmail.com
- 2. 按?下以編輯?片標題樣式 按?下以編輯?片?標題樣式 Shubo 你的 JS 該減肥了！ 5 个提升网?载入速度的技巧
- 3. 你的 JS 該減肥了！5個提升網?載入 速度的技巧 我的 JS 很肥會怎樣嗎？ 瀏覽器運作原理 / Code Splitting 拆分出 Vendor Bundle 運? webpack-bundle-analyzer 作分析 優化網?載入速度 為何要優化 / 測速?具 / 如何決定優先順序
- 4. 你的 JS 該減肥了！5個提升網?載入 速度的技巧 Tree Shaking 移除沒?到的程式碼 / ESM import export 其他有??技巧 使? CDN 版本 / 使? preset-env 減少 polyfill 體積 Dynamic Loading 根據路徑 / 對肥?套件作 Dynamic Loading
- 5. 你的 JS 該減肥了！5個提升網?載入 速度的技巧 我的 JS 很肥會怎樣嗎？ 瀏覽器運作原理 / Code Splitting 拆分出 Vendor Bundle 運? webpack-bundle-analyzer 作分析 優化網?載入速度 為何要優化 / 測速?具 / 如何決定優先順序
- 6. 為何要優化網?載入速度 ? 載入速度＝使?者體驗 ? 根據 Amazon 內部統計，慢100ms = 營收減少 1% ? SEO
- 7. Introduction ? 歐姆雷特 ? Omlet Arcade ? ?機遊戲直播社群 ? React.js + Webpack ? JS bundle 體積 -43% ? 載入速度 -30%
- 8. 優化載入速度的第?步：善?測速?具 ? Google PageSpeed Insight
- 9. 如何決定優化的優先順序？ ? 修正以後改善最多的項? ? 業務範圍中最容易改動的部分 ? 先做出成果，得到主管信任，爭取更多優化空間 ? 例：優化圖片尺?，涉及 app 上傳 / 後端處理 ? 例：優化 JavaScript bundle 體積，前端可??修改 build 設定
- 10. 你的 JS 該減肥了！5個提升網?載入 速度的技巧 我的 JS 很肥會怎樣嗎？ 瀏覽器運作原理 / Code Splitting 拆分出 Vendor Bundle 運? webpack-bundle-analyzer 作分析 優化網?載入速度 為何要優化 / 測速?具 / 如何決定優先順序
- 11. 我的 JS 很肥，會怎樣嗎？ ? 結論：JS Bundle 越?，網?載入越慢 ? 瀏覽器：解析 HTML -> 建立 DOM tree -> 渲染畫? ? JS “blocks” DOM tree 的建立過程 ? 下載 + 執? JS 越慢，block 越久，越慢渲染畫?
- 12. Code Splitting ? 將單? JS 檔案拆分成許多?塊 (chunk) ? 平?載入 ? 有需要時才載入 ? 各?可被快取
- 13. 你的 JS 該減肥了！5個提升網?載入 速度的技巧 我的 JS 很肥會怎樣嗎？ 瀏覽器運作原理 / Code Splitting 拆分出 Vendor Bundle 運? webpack-bundle-analyzer 作分析 優化網?載入速度 為何要優化 / 測速?具 / 如何決定優先順序
- 14. 拆分出 Vendor bundle ? Webpack runtime and manifest: 負責模組之間互動，體積可忽略 不計 ? Application Bundle: UI / 商業邏輯，經常變動 ? Vendor Bundle: 第三?套件 / node_modules，不太變動
- 15. Why Vendor Bundle? ? 通常變動不頻繁 ? 可被快取 ? 此配置在有 cache 情況下載入更快
- 16. 未優化前 Bundle 規劃 桌機版 ?機版 說明 arcade.js 585KB 426KB 商業邏輯 omlib.js 205KB 205KB 內部 lib / API 規格 vendor.js 366KB 366KB 第三?套件 Sum 1156KB 997KB
- 17. 運??具分析配置是否合理 ? 運? webpack-bundle-analyzer 作視覺化分析 ? application bundle ? 裡?有 node_modules ? 併入 vendor bundle 更好
- 18. 取出 Vendor bundle ? 將 node_modules 統?打包成 vendor.js
- 19. 抽出 Vendor Bundle：結果 桌機版 ?機版 說明 arcade.js 585KB 310KB 426KB 218KB 商業邏輯 omlib.js 205KB 205KB 內部 lib / API 規格 vendor.js 366KB 632KB 366KB 632KB 第三?套件 Sum 1156KB 997KB 1055KB* 效果：減少 application bundle 的??，加快再訪者載入速度
- 20. 你的 JS 該減肥了！5個提升網?載入 速度的技巧 Tree Shaking 移除沒?到的程式碼 / ESM import export 其他有??技巧 使? CDN 版本 / 使? preset-env 減少 polyfill 體積 Dynamic Import 根據路徑 / 對肥?套件作 Dynamic Loading
- 21. Dynamic Import ? 對新????，網站整體??不變 ? 如何減少整體下載量？動態下載需要的模組 ? Dynamic Import: 需要?到某段程式碼的時候才透過網路下載 JS bundle
- 22. ESM import() ? Webpack ?援 ESM import() 語法實現 dynamic import
- 23. 根據路徑作 Dynamic Import ? 為何要根據路徑？ ? GA數據顯?使?者?多停留在熱???，換?次數少 ? react-router ?援 dynamic import
- 24. 根據路徑作 Dynamic Import：結果 桌機版 ?機版 說明 arcade.js 310KB 235KB 218KB 189KB 商業邏輯 omlib.js 205KB 205KB 第三?套件 vendor.js 632KB 632KB 內部 lib / API 規格 Sum 1156KB 1072KB* 1055KB 1026KB* * 體積最?的? ?~20KB 效果：減少 application bundle 下載量
- 26. 對肥?套件作 Dynamic Import ? 哪些套件適合 dynamic import? ? 很肥? ? 使?頻率低 ? 範例: JSZip (27KB)
- 27. 肥?的第三?套件們 ? hls.js: 77KB ? moment.js: 64KB ? JSZip: 27KB ? request: 70KB (本來專案是跨平台 web / node.js)
- 28. 對肥?套件作 Dynamic Import：結果 桌機版 ?機版 說明 arcade.js 235KB 189KB 商業邏輯 omlib.js 205KB 205KB 內部 lib / API 規格 vendor.js 632KB 267KB 632KB 267KB 第三?套件 Sum 1072KB 784KB* 1026KB 707KB* *以使?頻率最 ?的??為例 效果：?幅減少整體下載量
- 29. 你的 JS 該減肥了！5個提升網?載入 速度的技巧 Tree Shaking 移除沒?到的程式碼 / ESM import export 其他有??技巧 使? CDN 版本 / 使? preset-env 減少 polyfill 體積 Dynamic Import 根據路徑 / 對肥?套件作 Dynamic Import
- 30. Tree-Shaking ? 將沒?到的程式碼從 JS bundle 中移除 ? 必須使? ESM import/export (靜態結構)
- 31. 如何設定 Tree-shaking ? 將專案中 CommonJS 的 require/module.exports 語法改寫成 ES Module 的 import/export 語法 ? 在 package.json 中標?具有 side effects 的模組 (例如 CSS)
- 32. Tree Shaking：結果 桌機版 ?機版 說明 arcade.js 235KB 189KB 商業邏輯 omlib.js 205KB 87KB 205KB 87KB 內部 lib / API 規格 vendor.js 267KB 267KB 第三?套件 Sum 784KB 666KB 707KB 589KB 效果：?幅減少整體下載量
- 33. 你的 JS 該減肥了！5個提升網?載入 速度的技巧 Tree Shaking 移除沒?到的程式碼 / ESM import export 其他有??技巧 使? CDN 版本 / 使? preset-env 減少 polyfill 體積 Dynamic Import 根據路徑 / 對肥?套件作 Dynamic Import
- 34. 第三?套件使? CDN 版本 ? 經常被使?的第三?套件如 React / jQuery ? 容易被快取 ? react-dom: 36KB
- 35. 使? preset-env 減少 Polyfill 體積 ? Polyfill: 讓舊的瀏覽器也能?援新的 API ? preset-env: preset-2015 的加強版 ? preset: babel-loader 的語法 plugin 集合 ? 根據?援瀏覽器清單，?動引入 polyfill ? 結果：31KB 18KB
- 36. 最終結果 桌機版 ?機版 說明 arcade.js 585KB 235KB 426KB 189KB 商業邏輯 omlib.js 205KB 87KB 205KB 87KB 內部 lib / API 規格 vendor.js 366KB 267KB 366KB 267KB 第三?套件 Sum 1156KB 666KB (-43%) 997KB 589KB (-41%) ? 根據 GA 數據，平均載入所需時間減少 30%
- 37. 結論 ? 拆分出 vendor bundle ? 根據路徑做 dynamic import ? 對肥?第三?套件作 dynamic import ? 使? tree shaking 移除沒?到的程式碼 ? 熱?第三?套件使? CDN 版本 ? 使? preset-env 減少 Polyfill 體積
- 38. 按?下以編輯?片標題樣式 按?下以編輯?片?標題樣式 Find me at shubochao@gmail.com 我是趙勗博 Shubo 歐姆雷特 資深前端?程師 FB: Shubo 寫個 Code