react按需載入路由react loadable

2021-10-07 15:56:42 字數 610 閱讀 2686

// 路由懶載入的工具類(我的專案懶載入類是放在utiles -> loadable.js下,utils也是自己配置的工具類資料夾)

import react from 'react'

import loadable from 'react-loadable'

import styles from '@styles/modules/loadable.module.scss'

// 通用的過場元件

const loadingcomponent =()=>

// 過場元件預設採用通用的,若傳入了loading,則採用傳入的過場元件

export default (loader, loading = loadingcomponent)=>)

}

import loadable from '@utils/loadable'

// @pages/main/main 是我元件的路徑

const mainpage = loadable(() => import('@pages/main/main'))

export

以上內容如果對你的專案有幫助,請給個贊謝謝!

路由懶載入(按需載入)

比較常用的import 一 為什麼要使用路由懶載入 在單頁應用中,如果沒有應用懶載入,運用webpack打包後的檔案將會異常的大,造成進入首頁時,需要載入的內容過多,延時過長,不利於使用者體驗,運用懶載入可以將頁面進行劃分,按需載入頁面,可以分擔首頁所承擔的載入壓力,減少載入用時。二 定義 懶載入簡...

react 使用antd 按需載入

2.修改package.json package.json 的配置需要做如下修改 scripts babel plugin import 是乙個用於按需載入元件 和樣式的 babel 外掛程式 原理 現在我們嘗試安裝它並修改config overrides.js檔案。yarn add babel p...

vue路由按需載入(路由懶載入

目前有三種方式實現路由元件的懶載入,分別是 把路由配置,進行修改 path shopcar name shopcar component resolve require pages shopcar resolve 1 執行是開啟chrome的network,就會看到進入路由 shopcar 時,會多...