vue打包速度优化

Posted 2021-01-08 hcxy

这是一个很头疼的问题，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");
    }
  },