使用webpack.require優化vue專案的路由

Amorcy發表於2018-03-26
WebUI優化Vue路由

之前做一個後臺系統的時候，前期路由也就十多個，就是使用的文件中的那種寫法：

import Vue from 'vue';    

const Login = () => import('@/components/login/login');       
const Index = () => import('@/components/home/index');     
// balaba.......前期少量的路由                        
export default new Router({                                        
routes: [ 
    {                               
      path: '/login',                     
      name: 'Login',                   
      component: Login,                 
    },
    {                     
      path: '/home',                
      redirect: '/operation/info/list',                  
      name: 'home',
    },                      
    //babal..........前期少量的路由     
    ])         
複製程式碼

在後期需求越來越來之後，整個專案的頁面達到了200+，此時的路由用之前的寫法無疑顯得特別冗餘，且在團隊協作的時候同時修改此檔案容易衝突。

使用webpack.require優化vue專案的路由
上圖是專案後期部分路由對應檔案的引入，此時的專案特別難以維護。為了解決這個問題，我們專案使用了webpack.require這個方法解決。 引用官方定義使用 require.context() 方法來建立自己的上下文（模組）。 你可以給這個方法傳3個引數：要搜尋的資料夾目錄，是否還應該搜尋它的子目錄，一個匹配檔案的正規表示式。
既：require.context('../view',true,/\.(vue|js)$/),第一個引數指的是要檢索的檔案路徑，第二個引數是指是否檢索子目錄，第三個引數需要傳入一個正規表示式來匹配被檢索目錄下符合正則的檔案（如上正則為匹配被檢索目錄所有vue/js檔案）。
最終，我們的router.js從幾百行的路由配置優檔案化成了僅僅幾十行程式碼的檔案。
參考文章：https://github.com/wuchangming/blog/blob/master/docs/webpack/require-context-usage.md

相關文章