vue性能優化方法
1、路由懶加載的設置
const Home=()=>import('@/components/Home')
2、keep-alive 緩存頁面
- 對組件進行緩存，從而節省性能。
<keep-alive exclude="Profile,User">
<router-view/>
</keep-alive>
3、使用v-show復用dom
4、v-for 遍歷避免同時使用v-if
5、長列表
- 如果列表是純粹數據展示，不會有任何變化，就不需要數據響應
//讓數據就不能變
export default {
data () {
return {
users:[]
}
},
await created(){
const users=await.get('/api/users')
this.users=Object.freeze(users)
}
}
/*
Object.freeze()凍結對象可提升性能，凍結后，不能修改添加刪除修改對象。返回被凍結的對象。
當把一個普通的js對象傳給 Vue 實例的 data 選項，Vue 將遍歷此對象所有的屬性， 並使用Object.defineProperty把這些屬性全部轉為 getter/setter，這些 getter/setter 對用戶來說是不可見的，但是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。
*/
-
如果是大數據列表，可采用虛擬滾動，只渲染少部分區域的內容
vue-virtual-scroller、vue-virtual-scroll-list
6、事件銷毀
- Vue組件銷毀時，會自動解綁它的全部指令及事件監聽器，但是僅限於組件本身的事件
created(){
this.timer=setInterval(this.refresh,2000)//跟組件什么關系
}
beforeDestory(){
clearInterval(this.timer)
}
7、圖片懶加載
- vue-lazyload。圖片懶加載
8、第三方插件按需引入
- 像ement-ui這樣的第三方組件庫可以按需引入，避免體積太大
//配置babel.config.js
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
//按需引入
import Vue from 'vue'
import { Button, Icon } from 'element-ui';
Vue.use(Button)
Vue.use(Icon)
9、無狀態的組件
- 標記為函數式組件 functional
- 無狀態的組件
10、代碼模塊化
- 獨立和可復用的模塊封裝成單獨的組件。
- 復用性越高越好，可配置型越強越好。
- 子組件分割出來，自己管自己的渲染。
- 里面有動態內容，經常變，自己管自己，不會影響其他的地方。不然一個頁面要重新渲染。
- css也可以通過less和sass的自定義css變量來減少重復代碼。
11、變量的本地化
import { heavy } from '@/utils'
export default {
props:['start'],
computed:{
base(){
return 10
},
result(){
const base = this.base//不要頻繁的引用this.base。定義一個變量就不會頻繁的去引用這個計算屬性，效率會高點。
let result = this.start
for(let i = 0;i <1000;i++){//后面需要頻繁的操作this.base。。
result+=heavy(base)
}
return result
}
}
}
12、打包配置優化
- 關閉source map，開啟gzip壓縮。
//關閉source map
productionSourceMap:false
//開啟gzip壓縮。compression-webpack-plugin@5.0.1最新高版本會有問題
let CompressionPlugin = require("compression-webpack-plugin")
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
configureWebpack: (config) => {
const plugins = [];
if (IS_PROD) {
plugins.push(
new CompressionWebpackPlugin({
filename: "[path].gz[query]",
algorithm: "gzip",
test: productionGzipExtensions,
threshold: 10240,
minRatio: 0.8,
})
);
}
config.plugins = [...config.plugins, ...plugins];
}
-
使用cdn的方式外部加載一些資源
- 在externals里面設置一些不必要打包的外部引用模塊
chainWebpack: (config) => { /**忽略的大包文件 * 屬性值為引入時你自定義的名稱,ELEMENT是固定的寫法 */ config.externals({ 'vue':'Vue', 'vue-router':'VueRouter', 'element-ui':'ELEMENT' }) }- 在piblic/index.html中把用到的資源通過cdn引入，資源尋找鏈接
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.5.2/vue-router.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/index.js"></script>
13、v-once、v-pre
- v-once：只渲染一次，第一次展示出來之后，不會變
- v-pre：告訴vue不要解析這個節點內部的內容，讓浪費時間