webpack - code splitting

標籤：and   mon   rev   bsp   undle   檔案中   載入   print   分離   

Code splitting is one of the most compelling features of webpack. This feature allows you to split your code into various bundles which can then be loaded on demand or in parallel. It can be used to achieve smaller bundles and control resource load prioritization which, if used correctly, can have a major impact on load time.

通俗來說就是把代碼分成很多很多塊（chunk）。

那為什麼要分塊呢？

之前，為了減少http請求，我們就把所有代碼打包成一個單獨的JS檔案。但是如果JS檔案過大的話，下載速度就很慢，得不償失。

因此webapck實現了把代碼分塊，需要某塊代碼的時候再去載入。

Code Splitting主要有三種方法：

1.  Entry Points : Manually split code using entry configuration(通過增加入口檔案)

2. Prevent Duplication : Use SplitChunksPlugin to dedupe and split chunks

3.Dynamic Import: Split code via inline function calls within modules

方法一就是增加入口檔案

Project

index.js

 

print.js

 

webpack.common.js

 

運行結果：

 

 

這種方法最簡單，但是有很多缺陷，看著很難受

1. index.js和print.js檔案都引入了lodash,重複的lodash module會被載入兩次

2.它很不靈活，不能動態分隔業務和核心應用

此刻我們需要把公用的lodash module提取出來。那我們就可以使用SplitChunksPlugin這個外掛程式了

2. 防止重複，提取公用依賴
webpack.config.js

webpack4已經棄用CommonChunkPlugin了，使用SplitChunkPlugin就可以了

 運行結果：

 

 

 相比上一次。已耗用時間少了100多ms, app.bundle.js和print.bundle.js的size都小了很多，lodash已經從這兩個檔案中移除了。

但是這種方法還不能做到按需載入

 

3. Dynamic Imports 動態匯入

使用import()，在webpack中的import()是個分離點——split-point，用來把被請求的模組獨立成一個單獨的模組。

import()把模組的名字作為一個參數，並且返回一個Promise: import(name)->Promise.

run : npm run server

顯然看到lodash沒有打包在app.bundle.js檔案裡面。

 

webpack - code splitting