react-router一般加載與懶加載

 在原先規劃系統設計是去讀src/pages/裡面有index.jsx?的頁面，搞得跟next.js類似

事實上這樣也不難，在vite.config.js這樣寫就好

import { defineConfig } from "vite"

import { GlobSync } from "glob"

export default defineConfig(({ mode }) => {

return {

......

define: {

__PAGES_ROUTES__: GlobSync("src/pages/**/index.{js,jsx}").found.map((x) => x.replace(/src\/pages\/(.*)\/index.jsx?/, "$1")),

},

}

})

 import loadable from "@loadable/component"

使用loadable進行懶加載

 ......

        __PAGES_ROUTES__.map((route, i) => {

const Component = loadable(() => import(`./pages/${route}`), {

     fallback: <LayoutPage center={() => ""} />,

})

return <Route path={route} key={i} element={<Component />} />

})

但今天收到一個難題需求，老闆希望把懶加載拔掉，減短切換頁的等待時間，因為不可能把Component在後端讀好傳到前端來，所以上面那方法就作廢，但總不會要我把上百個Component import進來吧，後來想到vite有附glob給我，稍微研究一下改成以下

const modules = import.meta.glob("./pages/**/index.{js,jsx}", {

import: "default",

eager: true,

})

......

    Object.keys(modules).map((route, i) => {

const path = route.replace(/\.\/pages\/(.*)\/index.jsx?/, "$1")

const Component = modules[route]

return <Route path={path} key={i} element={<Component />} />

})}

這樣改唯一的問題是，yarn dev第一次進入頁面等待時間會比較久一點，之後改動要等編譯時間也會久一點。當然在build的客戶端是沒有差的，是開發上的爽度差別而已

補充：用判斷讓import.meta.glob不要執行也沒用，他是屬於編譯層級的，所以一定會跑，要快只能註解掉

然後不能有在./pages/...../index.js是沒有export default的喔，不然會爆掉

總之就是這樣拉，打完收工