1.1 路由组件按需加载
1.2 第三方组件和插件。按需加载需引入第三方组件
1.3 对于一些插件，如果只是在个别组件中用的到，也可以不要在 main.js 里面引入，而是在组件中按需引入
<head>
<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css" />
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script>
<!-- built files will be auto injected -->
</body>
2、在 webpack.config.js 配置文件
module.exports = {
···
externals: {
‘vue‘: ‘Vue‘,
‘vuex‘: ‘Vuex‘,
‘vue-router‘: ‘VueRouter‘,
‘element-ui‘: ‘ELEMENT‘,
‘Axios‘:‘axios‘
}
},
3、卸载依赖的 npm 包，npm uninstall axios element-ui vue vue-router vuex
4、修改 main.js 文件里之前的引包方式
// import Vue from ‘vue‘
// import ElementUI from ‘element-ui‘
// import ‘element-ui/lib/theme-chalk/index.css‘
// import VueRouter from ‘vue-router‘
import App from ‘./App.vue‘
import routes from ‘./router‘
import utils from ‘./utils/Utils‘
Vue.use(ELEMENT)
Vue.use(VueRouter)
const router = new VueRouter({
mode: ‘hash‘, //路由的模式
routes
})
new Vue({
router,
el: ‘#app‘,
render: h => h(App)
})
比较实用的方法: 按需加载，优化loader配置，关闭生产环境的sourceMap，CDN优化。
vue-cli已做的优化： 代码压缩，提取公共代码，再优化空间不大。
根据项目实际需要和自身开发水平选择优化方法，必须避免因为优化产生bug。
原文：https://www.cnblogs.com/liliuyu/p/13646182.html