1、介紹
在對項目進行打包，上傳到服務器之后，可能會出現(xiàn)首次訪問首頁很慢的現(xiàn)象，為解決此問題，我們應當對項目進行打包優(yōu)化，進而提高訪問速度，提高用戶體驗。
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加載優(yōu)化
- 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'
}
},
