外掛按需載入 路由懶載入 { // 話題 path: '/topic', name: 'topic', component: () => import('@/views/hashtag/topic.vue'),路由懶載入 } 不生成map檔案 設定productionsourcemap false 打包時不打包 vue、vuex、vue-router、axios 等，換用國內的bootcdn直接引入到根目錄的 index.html 中。 圖片懶載入 vue-lazyload 輪播 vue-awesome-swiper

四、使用字型圖示代替切圖

字型圖示的優勢: （1）字型圖示任意縮放不會失真 （2）在專案中匯入後，以css樣式引用，相較於傳統的圖片大大減少請求數量，優化效能 （3）修改方便，如需要切換主題色可由css控制，避免視覺反覆切圖的工作量

五、使用雪碧圖

雪碧圖的優點: 將多張圖片合併到一張圖片中，可以減小圖片的總大小。 將多張圖片合併成一張圖片後，下載全部所需的資源，只需一次請求。可以減小建立連線的消耗。

六、提取公共樣式和方法

1.複用的樣式應當提取到公共的樣式表中複用

2.公共的方法應當提取到公共的js中複用

3.表單驗證的提取

1.2、computed 和 watch 區分使用場景

computed：是計算屬性，依賴其它屬性值，並且 computed 的值有快取，只有它依賴的屬性值發生改變，下一次獲取 computed 的值時才會重新計算 computed 的值； watch：更多的是「觀察」的作用，類似於某些資料的監聽回撥 ，每當監聽的資料變化時都會執行回撥進行後續操作； 運用場景： 當我們需要進行數值計算，並且依賴於其它資料時，應該使用 computed，因為可以利用 computed 的快取特性，避免每次獲取值時，都要重新計算； 當我們需要在資料變化時執行非同步或開銷較大的操作時，應該使用 watch，使用 watch 選項允許我們執行非同步操作 ( 訪問一個 API )，限制我們執行該操作的頻率，並在我們得到最終結果前，設定中間狀態。這些都是計算屬性無法做到的。

v-for 遍歷必須為 item 新增 key，且避免同時使用 v-if

視覺化 檢視檔案大小 webpack-bundle-analyzer speed-measure-webpack-plugin：測量出在構建過程中，每一個 Loader 和 Plugin 的執行時長。 compression-webpack-plugin

解決後dist檔案還大怎麼辦，使用gzip，gzip壓縮是一種http請求優化方式，通過減少檔案體積來提高載入速度。html、js、css檔案甚至json資料都可以用它壓縮，可以減小60%以上的體積。

• JS 壓縮：UglifyJSPlugin
• HTML 壓縮：HtmlWebpackPlugin
• 提取公共資源：splitChunks.cacheGroups
• CSS 壓縮：MiniCssExtractPlugin