Vue筆記八：多頁面打包框架（mpa）
該文章已經(jīng)過時，請移步Vue筆記十：Vue-cli3.0
我記得去年很多人看了我《用Webpack構(gòu)建Vue》一篇文章，但是因為webpack和vue升級速度很快，那文章很快就過時了。學(xué)習(xí)vue最好的教材莫過于vue-cli直接生成的單頁面項目?？上У氖撬贿^是一個單頁面的項目，在我們的實際生產(chǎn)環(huán)境中，往往都是較為分散的頁面，為的是保證項目的解耦。
餓了么的 PWA 升級實踐正講到餓了么的超大型SPA如何解耦成MPA的過程。
多頁面腳手架
github源碼在此，記得點星:
https://github.com/brandonxiang/mpa
特點
- 多個入口
- DllReferencePlugin 利用控制多頁面常用包
- CommonsChunkPlugin 控制多頁面的公用包
- ejs模版語言控制html
- --nomap 命令控制sourceMap
- whitelist 控制專門打包
使用方法
$ npm install -g vue-cli
$ vue init brandonxiang/mpa my-project
$ cd my-project
$ npm install
$ npm run build:dll
$ npm run dev
$ npm run build
用法
第一點，JS包的大小直接影響著首屏弱網(wǎng)情況下的頁面加載情況，DllReferencePlugin和CommonsChunkPlugin就有效拆分公用包的大小，每個包控制在100k左右。
dll打包在config中的dll.js中控制，把公共全量使用的npm包寫入配置文件：
module.exports = {
path: 'static/dll',
libs: [
'vue/dist/vue.esm.js',
'vue-router',
],
}
在npm run dev和npm run build前使用npm run build:dll去打固定dll包，提高打包調(diào)試的效率。
第二點，模版語言在html-webpack-plugin中的使用，將一些關(guān)鍵代碼內(nèi)聯(lián)拼接在html中。例如：
- header中的meta（包括dns預(yù)解析等）
- loading全局插件
- 計算rem的單位
- 關(guān)鍵全局樣式
第三點，黑名單的打包
在config/index.js配置黑名單，有些項目將不會打包。
blackList: ['Hello', 'eCommand', 'Pingan'],
同時，我們也可以專門指定打幾個包。
npm run build Hello eCommand Pingan
性能優(yōu)化
參考【技術(shù)研究】vue項目的性能優(yōu)化之路
Webpack3 的升級
Webpack的版本升級速度真的是非?？?，快得無法想象。有幸經(jīng)歷1到2和2到3的升級，體驗了一步一步的性能優(yōu)化。同期無論是 rollup 還是 parcel 的出現(xiàn)，他們的優(yōu)缺點很好地反哺了webpack的優(yōu)化點。parcel的出現(xiàn)又一次讓人反思“wbepack的配置是不是太過于繁瑣”，但是parcel由不夠成熟，而且tree-shaking和scope-hoisting的缺席。所以，現(xiàn)在前端工程化中，能投入生產(chǎn)的還是webpack，我也相信webpack4會變得更好。
多頁面腳手架正是采用全新的webpack3構(gòu)建，里面包含它的“內(nèi)容不變hash值不變”的特性，歡迎大家指點評論。
轉(zhuǎn)載，請表明出處。總目錄前段收集器
