前幾天聽老師講過前端架構師必備之Vue專案打包優化的課之後，有感而發利用空閒時間寫了一下。
大佬路過請留步知道一下，
使用vue-cli部署生產包時，發現資源包很大，打包後的vendor.js達到了1.4M，這已經很大了，而且會影響到首屏載入。那麼，怎麼優化呢？
1.元件按需載入
這是首先可以優化的點。如果頻繁使用了第三方元件/UI庫，如我的專案中經常同時使用了 element-ui, mint-ui,echarts等元件庫，如果全部引入，專案體積非常大，這時可以按需引入元件。
示例如下：
1.1 element-ui
首先，安裝 babel-plugin-component：
npm install babel-plugin-component -D
然後，將.babelrc 修改為：
```{
"presets": [["es2015", {
"modules": false
}]], "plugins": [ [ "component", {
"libraryName": "element-ui", "styleLibraryName": "theme-chalk"
}```複製程式碼然後引入部分元件，這樣一來，就不需要引入樣式了，外掛會幫我們處理。
?
// main.jsimport Vue from 'vue'import {
Dialog, Loading
} from 'element-ui' Vue.use(Dialog)Vue.use(Loading.directive)Vue.prototype.$loading = Loading.service複製程式碼// 然後正常使用元件
1.2 mint-ui
由於mint-ui是element-ui的移動端元件，所以它的使用和引入幾乎和element-ui一樣。
首先，安裝 babel-plugin-component：
npm install babel-plugin-component -D
然後，將.babelrc 修改為：
{
"presets": [ ["es2015", {
"modules": false
}] ], "plugins": [["component", [ {
"libraryName": "mint-ui", "style": true
} ]]]
}複製程式碼然後引入部分元件
// main.jsimport Vue from 'vue'import {
Toast, MessageBox
} from 'element-ui' Vue.use(Dialog)Vue.use(Loading.directive)Vue.prototype.$loading = Loading.service// 然後正常使用元件複製程式碼注意，element-ui和mint-ui不能同時在.babelrc中進行外掛設定，這種情況下，依然可以按需引入，但是不要在.babelrc中配置，在引入的地方同時引入css即可。
1.3 echarts
首先安裝babel-plugin-equire
npm i babel-plugin-equire -D
然後，在.babelrc檔案中新增該外掛
{
"plugins": [ // other plugins ... "equire" ]
}複製程式碼建立一個js檔案
// echarts.js// eslint-disable-next-lineconst echarts = equire([ 'tooltip', 'candlestick', 'bar', 'line', 'axisPointer', 'legend', 'grid'])export default echarts 複製程式碼// 業務元件，引入echarts
import echarts from ‘@/assets/lib/echarts’
// 使用與以前一樣
按需載入echarts
解決vue-cli首屏載入慢的問題
2.路由懶載入
這裡需要一個外掛
vue-router官方推薦syntax-dynamic-import外掛，不過它要求同時安裝@bable/core^7.0.0，如果你安裝了babel-core6，是會有版本衝突的。我的做法如下
npm install babel-plugin-syntax-dynamic-import --save-dev(^6.18.0)// router.jsconst login = () =>
import('@/components/login')const router = new VueRouter({
routes: [ {
path: '/login', component: login
} ]
})複製程式碼還有一種魔法註釋用法
有時候我們想把某個路由下的所有元件都打包在同個非同步塊 (chunk) 中。只需要使用 命名 chunk，一個特殊的註釋語法來提供 chunk name (需要 Webpack >
2.4)。
const Foo = () =>
import(/* webpackChunkName: “group-foo” */ ‘./Foo.vue’)
3.非同步元件
如果元件在頁面載入時不需要，只在呼叫時用到，這時可以使用非同步元件的寫法。僅僅是引入和元件註冊寫法不同
// template<
test v-if="showTest">
<
/test>
// script components: {
test: () =>
import('./test') // 將元件非同步引入，告訴webpack，將該部分程式碼分割打包
}, methods:{
clickTest () {
this.showTest = !this.showTest
}
}複製程式碼4.圖片的壓縮合並
無失真壓縮圖片：https://www.jb51.net/softs/605425.html
如有可能，將圖片製作成精靈圖
5.CDN加速
在index.html中引入cdn資源
<
body>
<
div id="app">
<
/div>
<
!-- built files will be auto injected -->
<
script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js">
<
/script>
<
script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js">
<
/script>
<
script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js">
<
/script>
<
script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js">
<
/script>
<
/body>
...複製程式碼修改 build/webpack.base.conf.js
module.exports = {context: path.resolve(__dirname, '../'),entry: {
app: './src/main.js'
},externals:{
'vue': 'Vue','vue-router': 'VueRouter','vuex':'Vuex','vue-resource': 'VueResource'
},...
}複製程式碼修改src/main.js src/router/index.js 註釋掉import引入的vue,vue-resource
// import Vue from 'vue'// import VueResource from 'vue-resource'// Vue.use(VueResource)複製程式碼6.壓縮程式碼
vue-cli已經使用UglifyJsPlugin 外掛來壓縮程式碼，可以設定成如下配置：
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false, drop_console: true, pure_funcs: ['console.log']
}, sourceMap: false
})複製程式碼其中sourceMap: false是禁用除錯功能。
如果設為true，在部署包中會生成.map結尾的js檔案。它用於在程式碼混淆壓縮的情況下仍可進行除錯。這個功能雖好，但會大大增加整體資源包的體積，所以將其禁用。
以上就是本文的全部內容，希望對大家的學習有所幫助，
本次給大家推薦一個免費的學習群，裡面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。對web開發技術感興趣的同學，歡迎加入Q群：582735936，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視訊資料。最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。需要vue專案打包優化視訊資料的可以加我