前端代碼拆分

問題場景：

在使用前端框架構建單頁應用時，服務器會返回一份html文件、抽取出來的css文件和一份打包好的js文件。html體積是極小的，至關於只提供了一個舞臺，而頁面結構的生成和更新徹底由js根據路由和框架特色、業務邏輯來控制，加上css樣式渲染出完整的頁面。打包後的js文件包括了框架和依賴庫（react、react-router等）還有業務邏輯代碼，因此功能越複雜，體積很大。

問題緣由分析：

瀏覽器從輸入url到完成顯示頁面有一個複雜的過程，這裏從加載文件開始分析。瀏覽器解析得到的html文檔並生成DOM樹，當瀏覽器解析到外部的script時，解析會暫停，併發送請求來加載script文件並執行，而後纔會繼續解析DOM。這就致使了過大的外部js文件拖慢了頁面的加載渲染。有人提出能夠加入 defer 屬性支持同步加載和瀏覽器緩存策略，但這只是有限的優化手段，請求時間和執行時間過長也會影響到首屏的加載，影響了用戶體驗。

代碼拆分原理

對於單頁應用來講，頁面是根據路由區分的，代碼拆分其實就是按照頁面來拆分，每一個頁面都對應一個分片。對多個頁面共享的代碼又獨立拆分出來，對於有不少頁面和複雜依賴的應用，共享代碼還能夠進一步拆分爲全部頁面共享的（React框架代碼）和部分頁面共享的（組件模塊），這樣當一個頁面加載時只須要加載頁面本身的分片和共享的分片就行，很大地提升了首屏渲染的速度。

三點注意：

1. 使用webpack拆分。webpack 是根據依賴關係進行打包的模塊打包工具。根據import()動態導入的方式進行頁面、組件分片。拆分框架代碼有兩種方式：一是使用SplitChunksPlugin將框架代碼拆分並與其餘分片放在一塊兒；二是使用DllPlugin將框架代碼拆分放在靜態資源服務器上，html頁面上使用script引入，應用打包時配置映射關係文件。對比SplitChunksPlugin的優勢是能夠將框架代碼文件放在cdn服務器並配置強制緩存，進一步提升加載速度。
2. 因爲代碼拆分主要是針對首次首屏渲染的優化，因此頁面不能拆得太分散，3~4個爲宜。
3. 使用相應的代碼拆分方案。好比React 代碼拆分 和 Vue 的動態組件