正文
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");
}
},
