1、vue3內(nèi)部使用了 Tree-shaking 技術(shù)，沒(méi)有使用到的api，在打包時(shí)不會(huì)進(jìn)行打包，直接進(jìn)行移除了。

2、可以在vue.config.js中進(jìn)行配置，一些consoel.log等打印輸出的，vue的警告等在生產(chǎn)的時(shí)候，盡量不要展示，還有sourcemap等

3、使用異步組件進(jìn)行異步加載const Foo = defineAsyncComponent(() => import('./Foo.vue'))

4、props父組件傳參的穩(wěn)定性

• 當(dāng)傳遞的props值進(jìn)行更新的時(shí)候，子組件就會(huì)進(jìn)行更新

<ListItem
  v-for="item in list"
  :id="item.id"
  :active-id="activeId" />

• 當(dāng)每次activeId每次更新的時(shí)候，子組件都會(huì)全部進(jìn)行更新，此時(shí)我們應(yīng)該加一個(gè)判斷

<ListItem
  v-for="item in list"
  :id="item.id"
  :active="item.id === activeId" />

• 只有當(dāng)activeId等于item.id的時(shí)候，在進(jìn)行更新

5、也可以使用v-once，v-memo具體的場(chǎng)景使用，進(jìn)行優(yōu)化

6、當(dāng)我們渲染大型的列表的時(shí)候，可以使用虛擬列表進(jìn)行優(yōu)化

• 如果你使用了ui框架，里面也會(huì)有虛擬列表的
• 也可以使用插件
• vue-virtual-scroller
• vue-virtual-scroll-grid
• 當(dāng)然你也可以自己進(jìn)行實(shí)現(xiàn)（后面會(huì)有虛擬列表的實(shí)現(xiàn)文章）

7、當(dāng)我們使用響應(yīng)式的api進(jìn)行聲明變量

• 如果不是頁(yè)面上需要進(jìn)行視圖更新的，我們可以不用reactive，ref更進(jìn)行聲明，可以使用shallowRef() 和 shallowReactive() 淺層式響應(yīng)進(jìn)行聲明（淺層式頂部是響應(yīng)的，底部都不是響應(yīng)數(shù)據(jù)）

8、有的頁(yè)面我們可以使用緩存（可以是keep-alive，也可以使用本地），減少請(qǐng)求數(shù)據(jù)

9、使用ui框架進(jìn)行按需引入

10、打包時(shí)開(kāi)啟gzip進(jìn)行壓縮，公共的樣式，js文件等放到src下的assets會(huì)進(jìn)行壓縮

11、圖片的優(yōu)化，一般圖標(biāo)盡可能的使用iconfont中的圖標(biāo)，不要使用圖片，也可以使用雪碧圖（這個(gè)要看你的項(xiàng)目適不適合，雪碧圖也是有缺點(diǎn)的），太大的圖片進(jìn)行壓縮，可以把圖片放到cdn上托管，減少使用本地圖片（不過(guò)這個(gè)取決于網(wǎng)絡(luò)，沒(méi)有本地圖片加載的快）或者使用圖片懶加載（vue-lazyload）

有的插件可以使用cdn進(jìn)行引入（不過(guò)這個(gè)也是有風(fēng)險(xiǎn)的，有時(shí)候插件進(jìn)行更新，你就需要替換版本，否則會(huì)導(dǎo)致項(xiàng)目有問(wèn)題）

12、在我們使用vue框架開(kāi)發(fā)的時(shí)候，一些指令的合理使用

• v-for跟v-if的使用，現(xiàn)在v3中v-if的優(yōu)先級(jí)大于v-for
• v-show和v-if的使用
• v-for需要搭配key的使用，在diff算法更新的時(shí)候，可以更快速的只更新需要更新的數(shù)據(jù)，而不是無(wú)腦的全部進(jìn)行更新
• computed和watch的合理運(yùn)用
• 使用監(jiān)聽(tīng)/定時(shí)器的時(shí)候，在頁(yè)面卸載的時(shí)候進(jìn)行移除監(jiān)聽(tīng)/取消定時(shí)器
• 將公共的樣式，js等進(jìn)行提取
• 合理的使用組件（組件的渲染要比dom渲染消耗的性能要大一點(diǎn)）

10、路由使用懶加載component:()=>import('../views/home.vue')