基於vue_cli配置多頁面實現增量打包

內容來源：平台研發部 盧凱 原創

一、Vue_cli 生成的頁面目錄及打包情況：

最近在學習webpack 打包的過程中，發現使用用vue_cli 生成的SPA程序打包存在很多問題：

首先，用vue_cli 生成的SPA目錄及打包結果如下：

（1）通過 build/webpack.base.conf.js的配置可以看出，項目的的入口文件只有一個./src/main.js，打包也只有一個index.html，上傳伺服器時，載入index.html時需要下載css和js導致首屏載入時間長，隨著項目文件的增加，愈加不容忽視；

（2）沒有進行Code Splitting，出現重複打包，打包文件過大等問題；

（3）所有靜態資源文件全都放在static目錄下，每次圖片修改，需要打包整個目錄並替換隨著項目文件的增加，這種做法並不可取；

二、配置Code Splitting實現分離第三方插件，公共組件:

通過code splitting分離打包，將第三方插件與業務代碼分離，利用瀏覽器緩存，減少非同步載入；

（1）第三方類庫單獨打包。由於第三方類庫的內容基本不會改變，可以將其與業務代碼分離出來，這樣就可以將類庫代碼緩存在客戶端，減少請求。

（2）按需載入。webpack支持定義分割點，通過require.ensure進行按需載入。

（3）通用模塊單獨打包。我們代碼中可能會有一些通用模塊，比如彈窗、分頁、通用的方法等等。其他業務代碼模塊常常會有引用這些通用模塊，會造成通用模塊重複打包，這時可以將通用模塊單獨打包出來。

上圖是配置Code Splitting的打包結果，利用wepack自帶的Bundle Analyzer插件分析：

可以看到打包文件被打包的更細了，切割成了很多chunks，但仍然存在jquery重複打包的問題；接下來來看一下我是如何配置來切割：

要配置切割我們需要一個插件CommonsChunksPlugin；

首先定義我們的chunks：

使用CommonsChunksPlugin提取公共部分：

這樣我們就合理利用瀏覽器的緩存，也可以在每次上傳伺服器時，只替換業務代碼；

打開dist/index.html，發現瀏覽器報錯。打開index.html發現是因為代碼切割，沒有自動引入所有的css和js。手動添加之後，項目完美運行。覺得每次手動添加過於繁瑣，尋求是否有更加優雅的解決辦法：

三、配置多頁面:

多次碰壁之後，發現要實現增量打包，關鍵在於入口文件，SPA的入口文件是唯一的，只有一個。想要生成多個文件，只能增加多個入口文件：

vue在工程化開發的時候很依賴webpack，而webpack是將所有的資源整合到一塊，弄成一個單頁面。但是vue不止可以做單頁面，它還可以做多頁面，如果要做多頁面的話需要對他的依賴，也就是webpack就是重新配置才可以:

（1）首先在build/webpack.dev.conf.js和build/webpack.prod.conf.js添加多頁，並為每個頁面配置chunk：

（3）最後我們可以定義的entries

node-glob用來獲取路徑，支持用*來獲取該路徑下的所有文件；此時，entries作為變數，只是在初始打包時，打包所有，更改業務代碼時，只需要打包該頁面；

通過配置多頁面的打包結果如下：

此時，由於我們的入口文件有三個，打包也打包出index.html、list.html、router.html三個頁面；

這是多頁面的目錄結構：

（1）所有封裝組件在component下。

（2）module目錄下又分為index、list、router三個獨立的頁面。

（3）每個頁面中有單獨的App.vue、*.html、*.js，我們可以把該頁面的靜態資源文件放在改頁面下，也可以把改頁面的組件放在改目錄下的views文件夾中。

（4）每個頁面都有一個App.vue來配置當前頁，因此每個頁面都是一個單獨的SPA程序，多個頁面之間就是簡單的MPA跳轉。

（5）每個SPA都可以配置自己的路由，這樣我們又可以利用路由來展現單頁面的優勢。

這樣就完成了基於vue_cli配置多頁面並實現增量打包。

發現多頁面完美解決大型SPA程序的缺點：

（1）將SPA細化為多個小的SPA，打包為多個頁面文件，避免首屏載入慢。

（2）將靜態資源文件分配到每個頁面，避免每次打包所有。

（3）實現業務程序增量打包。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！