1.路由懶加載
- 參考vue-router官方文檔
安裝@babel/plugin-syntax-dynamic-import插件
npm install --save-dev @babel/plugin-syntax-dynamic-import
babel.config.js里面聲明使用插件
"plugins": ["@babel/plugin-syntax-dynamic-import"]
- 使用路由懶加載方式寫(xiě)路由
{
path: '/home',
name: 'Home',
component: ()=>import(/* webpackChunkName: "homes" / "../views/Home.vue")
},
{
path: '/couponIndex',
name: 'couponIndex',
component:()=>import(/ webpackChunkName: "homes" / "../views/coupon/Index.vue")
},
{
path: '/cardbagIndex',
name: 'cardbagIndex',
component:()=>import(/ webpackChunkName: "others" */ "../views/cardbag/Index.vue")
}
webpackChunkName是分組，可以把需要一起加載的放一起，優(yōu)化加載速度
這樣就完成了路由懶加載拗慨，再次打包后舞竿，會(huì)把不同組件分割到不同的js文件里
頁(yè)面組件內(nèi)引入別的組件京景，也要使用懶加載寫(xiě)法
components: {
NavBar: () => import("../../components/NavBar.vue"),
CircleRate: () => import("../../components/CircleRate.vue")
}
2.externals配置
默認(rèn)情況下，依賴(lài)項(xiàng)的所有第三方包都會(huì)被打包到j(luò)s/chunk-vendors.******.js文件中骗奖，會(huì)導(dǎo)致該js文件過(guò)大确徙，加載速度很慢。
我們可以通過(guò)externals排除這些包执桌，使它們不被打包到j(luò)s/chunk-vendors.******.js文件中鄙皇，而是需要加載時(shí)去請(qǐng)求cdn資源。
vue.config.js里面配置configureWebpack仰挣，配置externals
module.exports = {
productionSourceMap: false, //不生成map文件
configureWebpack: {
externals: {
'vue-lazyload': 'VueLazyload'
'axios': 'axios',
'dayjs': 'dayjs',
'crypto-js': 'CryptoJS',
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'element-ui': 'ELEMENT'
}
}
}
在public目錄index.html文件里面伴逸，引入需要的js文件
<link rel="stylesheet" >
<script src="https://s2.pstatp.com/cdn/expire-1-M/axios/0.21.1/axios.min.js"></script>
<script src="https://lib.baomitu.com/dayjs/1.10.4/dayjs.min.js"></script>
<script src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
<script src="https://lib.baomitu.com/vuex/3.6.2/vuex.min.js"></script>
<script src="https://lib.baomitu.com/vue-router/3.5.1/vue-router.min.js"></script>
<script src="https://lib.baomitu.com/crypto-js/4.0.0/crypto-js.min.js"></script>
<script src="https://lib.baomitu.com/vue-lazyload/1.3.3/vue-lazyload.js"></script>
<script src="https://lib.baomitu.com/element-ui/2.15.0/index.min.js"></script>
在main.js里刪除elementui引入相關(guān)代碼
另外那些ui框架引入的css和js，也放到這里來(lái)膘壶，elementui也是一樣的操作
<link rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vant@2.9/lib/vant.min.js"></script>
這樣完成后错蝴，再次打包，js文件會(huì)大大變小颓芭，加載速度非常棒漱竖。
3.不生成map文件
productionSourceMap: false
4. 圖片懶加載,組件懶加載
使用vue-lazyload包，實(shí)現(xiàn)圖片資源懶加載畜伐，組件懶加載
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
lazyComponent: true
})
//使用方式
<div class="img-list">
<div v-for="(image, index) in imageList" :key="index">
<img v-lazy="image" />
</div>
</div>
//注意事項(xiàng)馍惹，需要給img固定寬高
.img-list {
height: 70vh;
overflow-y: auto;
img {
max-width: 7.2rem;
height: 6rem;
}
}
//再次打開(kāi)頁(yè)面，會(huì)發(fā)現(xiàn)玛界，隨著滾動(dòng)万矾，當(dāng)需要加載時(shí)，才會(huì)加載圖片
//組件懶加載慎框，需要把組件放在<lazy-component>標(biāo)簽中間即可良狈。
<lazy-component>
<CircleRate></CircleRate>
</lazy-component>
可以在組件mounted里面加入console語(yǔ)句，監(jiān)測(cè)懶加載是否成功笨枯。
