vue打包速度優化

這是一個很頭疼的問題，webpack極大的簡化了前端自動化配置，但是打包速度實在是不如人意。在此之前，本人也嘗試過網友的一些方法，但是，很多坑，跳進去就出不來，經過多個項目實踐，現總結一下我用到的優化方式： cdn

原理： 上線依賴（通常放在package.json>dependencies）不參與打包構建，全部通過cdn引入

測試結果： 經過幾個項目測驗，能從40s以上降到 20s以下，至少節省一半打包時間。

// index.html
 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

 <script src="https://cdn.bootcss.com/vue/2.5.2/vue.js"></script>
 <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
 <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.js"></script>
 <script src="https://cdn.bootcss.com/echarts/4.0.4/echarts.js"></script>
 <script src="https://unpkg.com/element-ui/lib/index.js"></script>

 <!--<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/echarts/4.0.4/echarts.min.js"></script>-->
 <!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->

// build > webpack.base.conf.js

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    ...
  },
  resolve: {
   ...
  },
  module: {
    ...
  },
  node: {
    ...
  },
  externals:{
  // '引入資源名': '對外資源名'
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'vuex':'Vuex',
    'element-ui': 'ELEMENT',
    'echarts': 'echarts',
  },
}

// src > main.js
// import Vue from 'vue'
import App from './App'
// import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';
import router from './router'
import store from './store'

// Vue.use(ElementUI)

import VueCountUp from 'vue-countupjs';
Vue.use(VueCountUp);  // 其它組件可正常用Vue.use(xxx)

// src > router > index.js
// import Vue from 'vue'
// import Router from 'vue-router'
// Vue.use(Router)

var router=  new VueRouter({  // VueRouter,保持和 webpack.base.conf.js 中 externals 暴露的變量一致。

})

// src > store > index.js
// import Vue from 'vue'
// import Vuex from 'vuex'
// Vue.use(Vuex)

另外，在store中調用element的方式也有變化，element方法都會掛載到 ELEMENT 變量上。

  // actions.js 刪除地址
  async delAddress({commit,dispatch},id) {
    let { msg } = await delAddress([id]);
    if(msg === 'success'){
      ELEMENT.Message({ showClose: true,
        message: '刪除成功',
        type: "error" })
      dispatch("getAddressList");
    }
  },