一、import按需加載
按需加載路由組件通過(guò)import導(dǎo)入是性能優(yōu)化的常用手段。此外,結(jié)合<component />組件動(dòng)態(tài)渲染也可以進(jìn)行優(yōu)化。
典型的業(yè)務(wù)場(chǎng)景中,模塊通常分為基礎(chǔ)表和業(yè)務(wù)表兩部分。基礎(chǔ)信息建立完畢后,往往需要在不同業(yè)務(wù)頁(yè)面間進(jìn)行交叉引用。例如,在一個(gè)業(yè)務(wù)頁(yè)面需要根據(jù)某個(gè)值到基礎(chǔ)表頁(yè)面搜索并選擇信息。
在這類場(chǎng)景下,我們可以:
- 將基礎(chǔ)表組件提取出來(lái),單獨(dú)引入。
- 業(yè)務(wù)頁(yè)面通過(guò)<component :is="baseTable">動(dòng)態(tài)渲染基礎(chǔ)表組件。
- 傳參控制基礎(chǔ)表搜索和選擇功能。
- 基礎(chǔ)表返回選擇結(jié)果給業(yè)務(wù)頁(yè)面。
這樣可以實(shí)現(xiàn)信息交叉復(fù)用,同時(shí)避免重復(fù)引入基礎(chǔ)組件代碼,優(yōu)化了性能和結(jié)構(gòu)。結(jié)合按需加載和動(dòng)態(tài)渲染,可以很好解決這類常見業(yè)務(wù)需求。
<template>
<div>
<div class="count" @click="showDynamicComponent">按需加載頁(yè)面</div>
<Modal title="動(dòng)態(tài)數(shù)據(jù)" :visible="visible" @ok="()=>dynamicComponent=null">
<component :is="dynamicComponent" ref="dynamicRef"/>
</Modal>
</div>
</template>
<script>
import { Modal } from 'iview'
export default {
components: {
Modal
},
data() {
return {
dynamicComponent: null,
visible: false
};
},
methods: {
showDynamicComponent() {
this.visible = true
import('@/views/base/test.vue').then(res=>{
this.dynamicComponent = res.module
})
},
},
};
</script>
最后通過(guò)this.$refs.dynamicRef這個(gè)方式來(lái)拿到組件的信息和方法。
當(dāng)然如果只引入一個(gè)組件的時(shí)候，可以不采用上面的方式進(jìn)行。可以使用這種。
<template>
<dynamicComponent ref="dynamicComponentRef"/>
</template>
<script>
// import dynamicComponent from '@/components/dynamicComponent.vue'; // 原來(lái)的引入
const dynamicComponent = () => import('@/components/dynamicComponent.vue')
export default {
components: {
dynamicComponent
}
}
</script>二、thread-loader打包
業(yè)務(wù)場(chǎng)景
充分利用cpu核心數(shù)，進(jìn)行快速打包。
// 開啟多線程打包
config.module
.rule('js')
.test(/\.js$/)
.use('thread-loader')
.loader('thread-loader')
.options({
// worker使用cpu核心數(shù)減1
workers: require('os').cpus().length - 1,
// 設(shè)置cacheDirectory
cacheDirectory: '.cache/thread-loader'
})
.end()三、圖片轉(zhuǎn)base64
將圖片轉(zhuǎn)成base64主要是為了減少HTTP請(qǐng)求數(shù)量,從而加快網(wǎng)頁(yè)加載速度。 除此以外,圖片也可以上傳到云端服務(wù)如阿里云、七牛云等,來(lái)優(yōu)化圖片體積大小。
當(dāng)圖片體積較小時(shí),可以將其轉(zhuǎn)成base64編碼嵌入HTML中,這樣可以完全避免額外的HTTP請(qǐng)求,明顯加快加載。但是,base64編碼后的圖片體積會(huì)比原始圖片大,所以只適合體積較小的圖片。對(duì)于體積大的圖片,最好還是單獨(dú)請(qǐng)求,上傳到云端優(yōu)化也是一個(gè)不錯(cuò)的選擇。
// 安裝
npm?install?url-loader?--save-dev
// 配置
module.exports?=?{
??module:?{
????rules:?[{
????????test:?/.(png|jpg|gif)$/i,
????????use:?[{
????????????loader:?'url-loader',
????????????options:?{
// 小于 10kb 的圖片轉(zhuǎn)化為 base64
??????????????limit:?1024 * 10
????????????}
????????}]
?????}]
??}
};相信大家還有其他的優(yōu)化方案，歡迎大家在評(píng)論區(qū)中進(jìn)行分享，或者發(fā)布文章，大家一起學(xué)習(xí)。
