1烧颖、介紹
在對(duì)項(xiàng)目進(jìn)行打包，上傳到服務(wù)器之后窄陡，可能會(huì)出現(xiàn)首次訪問首頁很慢的現(xiàn)象炕淮，為解決此問題，我們應(yīng)當(dāng)對(duì)項(xiàng)目進(jìn)行打包優(yōu)化跳夭，進(jìn)而提高訪問速度涂圆，提高用戶體驗(yàn)们镜。
2、方式一：路由懶加載
通過 () => import('路由組件路勁') 方式對(duì)路由組件進(jìn)行懶加載润歉，例如：
{
path: '/login',
component: () => import('views/login/Login'),
meta: {
title: '登錄',
keepAlive: false
}
}
通過普通導(dǎo)入的方式模狭，打包之后js文件夾里存在的只有app.js文件，而通過路由懶加載的方式導(dǎo)入的踩衩，則還會(huì)存在其他js文件胞皱，如下圖所示：
路由懶加載打包之后效果
3、方式二：去除打包文件中的.map文件
在vue.config.js文件里配置productionSourceMap: false打包時(shí)九妈，即可自動(dòng)去除打包文件里的.map文件反砌，配置如下所示：
module.exports = {
//去除打包之后的所有.map文件
productionSourceMap: false,
}
4、方式三：CDN加載優(yōu)化
- 1萌朱、在index.html中引入相關(guān)的CDN宴树，可通過https://www.bootcdn.cn/進(jìn)行查找相關(guān)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文件中進(jìn)行相關(guān)一對(duì)一配置晶疼，其配置如下所示（vue在最前）：
module.exports = {
configureWebpack: {
//忽略打包的文件
externals: {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT',
'Axios':'axios'
}
},
