vue极致打包_vue打包速度优化

这是一个很头疼的问题，webpack极大的简化了前端自动化配置，但是打包速度实在是不如人意。在此之前，本人也尝试过网友的一些方法，但是，很多坑，跳进去就出不来，经过多个项目实践，现总结一下我用到的优化方式： cdn

原理： 上线依赖(通常放在package.json>dependencies)不参与打包构建，全部通过cdn引入

测试结果： 经过几个项目测验，能从40s以上降到 20s以下，至少节省一半打包时间。

// index.html

// 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= newVueRouter({ // 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");

}

},