vue實戰 - 項目優化/擴展

1. 緩存路由組件對象

<!-- 好處: 複用路由組件對象, 複用內存中路由組件獲取的後臺數據 -->
<keep-alive>
	<router-view />
</keep-alive>
複製代碼

2. 路由組件懶加載

咱們寫的全部Js文件最後都會打包成一個文件，而咱們實際的需求是路由組件並非一次所有加載過來，而是按需加載。因此就要在打包前就對代碼進行分割，從而實現路由組件懶加載。

// router/index.js文件中 改變引入方式 實現路由組件懶加載
const Msite = () => import('../pages/Msite/Msite.vue')
const Search = () => import('../pages/Search/Search.vue')
const Order = () => import('../pages/Order/Order.vue')
const Profile = () => import('../pages/Profile/Profile.vue')

// 此時的Msite等都是返回路由組件的函數，只有請求對應的路由路徑時(第一次)纔會執行此函數並加載路由組件
複製代碼

此時切換路由，能夠在控制檯NetWork裏看到拆分打包後的js文件實現了按需加載

3. 圖片懶加載: vue-lazyload

安裝npm install --save vue-loader

// 在main.js文件中引入並註冊插件
import VueLazyload from 'vue-lazyload'
// 將一張loading圖片加載進來
import loading from './common/img/loading.gif'
Vue.use(VueLazyload, { // 內部自定義一個指令lazy
	loading
})
// 在圖片標籤中使用 （Food組件）
<img v-lazy="food.image">
複製代碼

4. 打包文件分析與優化

• vue 腳手架提供了一個用於可視化分析打包文件的包 webpack-bundle-analyzer 和配置
• 啓用打包可視化: npm run build --report 能夠根據可視化文件分析頁面對項目進行優化