寫在前面
在Vue項目中，引入到工程中的所有js、css文件，編譯時都會被打包進vendor.js，瀏覽器在加載該文件之后才能開始顯示首屏。若是引入的庫眾多，那么vendor.js文件體積將會相當的大，影響首開的體驗。
一、分析打包文件
首先引入webpack-bundle-analyzer插件，分析打包后的vendor
-
安裝
npm install webpack-bundle-analyzer --save-dev
-
配置
在vue.config.js文件中的chainWebpack配置插件，默認會在8888端口打開
chainWebpack: config => {
config.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
發現主要是moment和vue系列的文件占用比較大。
二、moment優化
根據之前打包分析圖來看，主要是locale下moment的其他語言包占用體積較大。默認是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等加載下來，達到加速首開的目的。
外部的庫文件，可以使用CDN資源，或者別的服務器資源等。
1. vue.config.js中增加externals，將引用的外部模塊導入
module.exports = {
// ...此處省略其他配置
chainWebpack: config => {
var externals = {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex'
}
config.externals(externals)
}
// ...此處省略其他配置
}
2. html文件中直接script引入cdn文件
cdn引入的地址可以參考官網
https://cn.vuejs.org/v2/guide/installation.html#CDN
也可以像這篇文章是直接在vue.config.js中配置cdn的url地址vue-cli3打包項目引入外部CDN資源文件
四、優化結果
moment的其他語言包沒有被打包了，vue等文件也都用的cdn文件，沒有被打包進去vendor。
五、vue項目的其他優化建議
productsourceMap：false（在vue.config.js中配置）
打包后每個js文件都有一個map文件。
map文件的作用：項目打包后，代碼都是經過壓縮加密的，如果運行時報錯，輸出的錯誤信息無法準確得知是哪里的代碼報錯。 有了map就可以像未加密的代碼一樣，準確的輸出是哪一行哪一列有錯。
配置該項為false可以不生成map文件。路由懶加載(按需加載)
可參考官方文檔。
踩過的一個坑：import里面的組件路徑，可以用字符串模板``形式，但是不支持變量賦值。使用插件去除console、warnings、debugger等無用內容來減少文件大小
// 安裝uglifyjs-webpack-plugin
cnpm install uglifyjs-webpack-plugin --save-dev
