javascript優化之code splitting簡介

摘要： javascript優化之code splitting tree shaking 指的是去掉沒用到的程式碼，減小js檔案體積從而提高載入速度；而code splitting 指的是如何將js程式碼分解成不同的js檔案，使得頁面在開啟時只加載必要的js檔案，從而提高頁面...

javascript優化之code splitting

tree shaking 指的是去掉沒用到的程式碼，減小js檔案體積從而提高載入速度；而code splitting 指的是如何將js程式碼分解成不同的js檔案，使得頁面在開啟時只加載必要的js檔案，從而提高頁面載入速度。

大概有以下三種分解方式：

Vendor splitting

將第三方程式碼(vendor code)和應用程式的程式碼分開來，使用不用的快取策略，使得它們互不影響。我們始終 都應該這麼做

Entry point splitting

對於多頁面應用，應該按頁面打包js，並將各個頁面的公共js提取出來作為單獨的js檔案進行載入

Dynamic splitting

使用動態js載入語法，在頁面首次開啟後，在後面的操作過程中按需載入js，比如根據使用者狀態或模組切換動態載入相關js，提高頁面首屏渲染速度