一.源碼優(yōu)化
1.代碼模塊化，封裝成單獨(dú)的組件，復(fù)用性越高越好贺喝，可配置型越強(qiáng)越好，包括css也可以通過less和sass的自定義css變量來優(yōu)化
2.設(shè)置key 值芒篷，不僅僅是v-for 搜变，由于vue 內(nèi)部 diff算法，例如 動(dòng)態(tài)加載的 表單
3.Vue路由针炉，組件 設(shè)置成懶加載，當(dāng)首屏渲染的時(shí)候扳抽，能夠加快渲染速度篡帕。（require, import）
4.理解Vue的生命周期，不要造成內(nèi)部泄漏贸呢，使用過后的全局變量在組件銷毀后重新置為null
5.keep-alive對組件進(jìn)行緩存镰烧。
6.對于頻繁切換的組件使用v-show
7.使用凍結(jié)對象，因?yàn)槠胀▽ο骎ue會(huì)使用Object.defineProperty（Vue3 Proxy）重寫對象屬性,但是對象如果是凍結(jié)對象則不會(huì)轉(zhuǎn)化（當(dāng)有些數(shù)據(jù)不需要做成相應(yīng)式的時(shí)候可用）
8.使用函數(shù)式組件（函數(shù)式組件是一種定義自身沒有任何狀態(tài)的組件的方式楞陷。它們很像純函數(shù)：接收 props怔鳖，返回 vnodes。函數(shù)式組件在渲染過程中不會(huì)創(chuàng)建組件實(shí)例 (也就是說固蛾，沒有 this)结执，也不會(huì)觸發(fā)常規(guī)的組件生命周期鉤子。）官網(wǎng) https://cn.vuejs.org/guide/extras/render-function.html
9.使用計(jì)算屬性（如果模板中某個(gè)數(shù)據(jù)會(huì)使用多次艾凯，并且該數(shù)據(jù)是通過計(jì)算得到的献幔，使用計(jì)算屬性以緩存它們
）
10.使用延遲裝載（defer），利用 requestAnimationFrame 分批次加載組件
二．打包優(yōu)化
1.修改vue.config.js中的配置項(xiàng)趾诗，把productionSourceMap設(shè)置為false蜡感，不然最終打包過后會(huì)生成一些map文件，并且在生成環(huán)境是可以通過map去查看到源碼的，這樣會(huì)造成源碼泄漏郑兴。productionGzip設(shè)置為true可以開啟gzip壓縮犀斋，使打包過后體積變小。
2.使用cdn的方式外部加載一些資源情连，比如vue-router叽粹、axios等Vue的周邊插件,在webpack.config.js里面，externals里面設(shè)置一些不必要打包的外部引用模塊蒙具。然后在入門文件index.html里面通過cdn的方式引入需要的插件球榆。
image.png
image.png
