快捷導(dǎo)航

Vue-router優(yōu)化import引入過多導(dǎo)致index文件臃腫問題

更新時間：2023年08月21日 09:01:30 作者：koi_li

這篇文章主要為大家介紹了Vue-router優(yōu)化import引入過多導(dǎo)致index文件臃腫問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

需求

當(dāng)我們在開發(fā)過程中，需要引入很多的文件，但是又不想每個文件都依次導(dǎo)入的時候就會想有沒有一個方法可以批量導(dǎo)入 require.context方法就可以解決這個問題.(僅限于webpack）

function importAll (require) {
  console.log(require.keys(),'keys')  // 此處是由多個文件路徑組成的數(shù)組
  require.keys().forEach(item=>{
    routerAll.push(require(item).default)
  })
  console.log(routerAll,'routerALL')  // 將文件的 export default 暴露出去
}
importAll(require.context('./',true,/\.js/))let routerAll = []；
function importAll (require) {
  console.log(require.keys(),'keys')  // 此處是由多個文件路徑組成的數(shù)組
  require.keys().forEach(item=>{
    routerAll.push(require(item).default)
  })
  console.log(routerAll,'routerALL')
}
importAll(require.context('./',true,/\.js/))

代碼詳解

require.context

require.context(deirectory,useSubdirectories,regExp)

1.directory:要查找的文件路徑(String)

2.userSubdirectories:是否查找子目錄（Boolean)

3.regExp:要匹配文件的正則

require.context.keys()

const ctx = require.context('./components/', true, /\.js$/)
console.log(ctx.keys())
// ["./A.js", "./B.js", "./C.js", "./D.js"]

require.context.keys()返回一個數(shù)組，數(shù)組每個元素傳入 require.context方法中，就可以到處相應(yīng)的文件

借鑒了Store 的自動化引入

當(dāng)然此方法也可以應(yīng)用到別的文件

在 main.js 中引入大量公共組件

import Vue from 'vue'
// 自定義組件
const requireComponents = require.context('../views/components', true, /\.vue/)
// 打印結(jié)果
// 遍歷出每個組件的路徑
requireComponents.keys().forEach(fileName => {
  // 組件實例
  const reqCom = requireComponents(fileName)
  // 截取路徑作為組件名
  const reqComName =reqCom.name|| fileName.replace(/\.\/(.*)\.vue/,'$1')
  // 組件掛載
  Vue.component(reqComName, reqCom.default || reqCom)
})

今天的分享就到這里希望能對你有所幫助。

以上就是Vue-router優(yōu)化import引入過多導(dǎo)致index文件臃腫問題的詳細(xì)內(nèi)容，更多關(guān)于Vue-routert引入導(dǎo)致index臃腫的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: