寫在前面
在Vue項(xiàng)目中牛郑，引入到工程中的所有js、css文件签财，編譯時都會被打包進(jìn)vendor.js串慰，瀏覽器在加載該文件之后才能開始顯示首屏。若是引入的庫眾多荠卷，那么vendor.js文件體積將會相當(dāng)?shù)拇竽Ｂ绊懯组_的體驗(yàn)。
一油宜、分析打包文件
首先引入webpack-bundle-analyzer插件掂碱，分析打包后的vendor
-
安裝
npm install webpack-bundle-analyzer --save-dev
-
配置
在vue.config.js文件中的chainWebpack配置插件，默認(rèn)會在8888端口打開
chainWebpack: config => {
config.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
發(fā)現(xiàn)主要是moment和vue系列的文件占用比較大慎冤。
二疼燥、moment優(yōu)化
根據(jù)之前打包分析圖來看，主要是locale下moment的其他語言包占用體積較大蚁堤。默認(rèn)是en的語言包醉者，所以在無需其他語言的情況下，可以直接忽略掉locale下的文件不打包披诗。
解決方案：用webpack自帶的IgnorePlugin插件
vue.config.js文件
var webpack = require('webpack')
module.exports = {
// ...此處省略其他配置
chainWebpack: config => {
config.plugin('ignore')
.use(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)); //忽略/moment/locale下的所有文件
}
// ...此處省略其他配置
}
三撬即、vue、vue-router呈队、vuex改為cdn引入
將引用的外部js剥槐、css文件剝離開來，不編譯到vendor.js中宪摧，而是用資源的形式引用粒竖，這樣瀏覽器可以使用多個線程異步將vendor.js、外部的js等加載下來几于，達(dá)到加速首開的目的蕊苗。
外部的庫文件，可以使用CDN資源沿彭，或者別的服務(wù)器資源等朽砰。
1. vue.config.js中增加externals，將引用的外部模塊導(dǎo)入
module.exports = {
// ...此處省略其他配置
chainWebpack: config => {
var externals = {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex'
}
config.externals(externals)
}
// ...此處省略其他配置
}
2. html文件中直接script引入cdn文件
cdn引入的地址可以參考官網(wǎng)
https://cn.vuejs.org/v2/guide/installation.html#CDN
也可以像這篇文章是直接在vue.config.js中配置cdn的url地址vue-cli3打包項(xiàng)目引入外部CDN資源文件
四、優(yōu)化結(jié)果
moment的其他語言包沒有被打包了锅移，vue等文件也都用的cdn文件熔掺，沒有被打包進(jìn)去vendor。
五非剃、vue項(xiàng)目的其他優(yōu)化建議
productsourceMap：false（在vue.config.js中配置）
打包后每個js文件都有一個map文件置逻。
map文件的作用：項(xiàng)目打包后，代碼都是經(jīng)過壓縮加密的备绽，如果運(yùn)行時報(bào)錯券坞，輸出的錯誤信息無法準(zhǔn)確得知是哪里的代碼報(bào)錯。 有了map就可以像未加密的代碼一樣肺素，準(zhǔn)確的輸出是哪一行哪一列有錯恨锚。
配置該項(xiàng)為false可以不生成map文件。路由懶加載(按需加載)
可參考官方文檔倍靡。
踩過的一個坑：import里面的組件路徑猴伶，可以用字符串模板``形式，但是不支持變量賦值塌西。使用插件去除console他挎、warnings、debugger等無用內(nèi)容來減少文件大小
// 安裝uglifyjs-webpack-plugin
cnpm install uglifyjs-webpack-plugin --save-dev
