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