javascript優化之code splitting簡介
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,提高頁面首屏渲染速度