1、介绍
在对项目进行打包，上传到服务器之后，可能会出现首次访问首页很慢的现象，为解决此问题，我们应当对项目进行打包优化，进而提高访问速度，提高用户体验。
2、方式一：路由懒加载
通过 () => import('路由组件路劲') 方式对路由组件进行懒加载，例如：
{
path: '/login',
component: () => import('views/login/Login'),
meta: {
title: '登录',
keepAlive: false
}
}
通过普通导入的方式，打包之后js文件夹里存在的只有app.js文件，而通过路由懒加载的方式导入的，则还会存在其他js文件，如下图所示：
路由懒加载打包之后效果
3、方式二：去除打包文件中的.map文件
在vue.config.js文件里配置productionSourceMap: false打包时，即可自动去除打包文件里的.map文件，配置如下所示：
module.exports = {
//去除打包之后的所有.map文件
productionSourceMap: false,
}
4、方式三：CDN加载优化
- 1、在index.html中引入相关的CDN，可通过https://www.bootcdn.cn/进行查找相关CDN,html部分代码如下所示:
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.5.1/vuex.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/index.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
- 2、在vue.config.js文件中进行相关一对一配置，其配置如下所示（vue在最前）：
module.exports = {
configureWebpack: {
//忽略打包的文件
externals: {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT',
'Axios':'axios'
}
},
