React 路由懶加載的幾種實(shí)現(xiàn)方案
更新時(shí)間：2018年10月23日 10:53:58 作者：Manster
這篇文章主要介紹了React 路由懶加載的幾種實(shí)現(xiàn)方案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
這篇文字簡單的介紹了React在路由懶加載方面的幾種實(shí)現(xiàn)方案。
傳統(tǒng)的兩種方式
import()
符合ECMAScript提議的import()語法，該提案與普通 import 語句或 require 函數(shù)的類似，但返回一個(gè) Promise 對象。這意味著模塊時(shí)異步加載的
webpack v2+ 使用
使用方式
function component() {
return import( /* webpackChunkName: "lodash" */ 'lodash').then(_ => {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}).catch(error => 'An error occurred while loading the component');
}
// 或者使用async
async function getComponent() {
var element = document.createElement('div');
const _ = await import(/* webpackChunkName: "lodash" */ 'lodash');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
require.ensure
webpack指定的使用方式
webpack v1 v2 指定使用方式
使用方式
require.ensure([], function(require){
var list = require('./list');
list.show();
，'list');
<!-- Router -->
const Foo = require.ensure([], () => {
require("Foo");
}, err => {
console.error("We failed to load chunk: " + err);
}, "chunk-name");
//react-router2 or 3
<Route path="/foo" getComponent={Foo} />
lazyload-loader
相對于前兩種，此種方式寫法更為簡潔。
使用方式
// webpack 配置文件中 使用lazyload-loader（必須將lazuyload-loader 放置在use的最右側(cè)）
module: {
rules: [
{
test: /\.(js|jsx)$/,,
use: [
'babel-loader',
'lazyload-loader'
]
},
業(yè)務(wù)代碼中
// 使用lazy! 前綴 代表需要懶加載的Router
import Shop from 'lazy!./src/view/Shop';
// Router 正常使用
<Route path="/shop" component={Shop} />
原理 ： https://github.com/rongchanghai/lazyload-loader
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
閉包陷阱是一個(gè)常見的問題,尤其是在處理異步操作、事件處理器、或是定時(shí)器時(shí),本文就來介紹一下React閉包陷阱產(chǎn)生和解決小結(jié),具有一定的參考價(jià)值,感興趣的可以了解一下2025-04-04
使用Webpack打包React項(xiàng)目的流程步驟
隨著React應(yīng)用日益復(fù)雜,開發(fā)者需要借助模塊打包工具來管理項(xiàng)目依賴、轉(zhuǎn)換代碼和優(yōu)化性能,Webpack是一款功能強(qiáng)大的模塊打包器,它可以將React項(xiàng)目中的JavaScript、CSS、圖片等資源打包成瀏覽器友好的文件,本文將全面介紹如何使用Webpack打包React項(xiàng)目2025-03-03
React 是一個(gè)用于構(gòu)建用戶界面的 JavaScript 庫，主要用于構(gòu)建 UI，而不是一個(gè) MVC 框架，React 擁有較高的性能，代碼邏輯非常簡單，越來越多的人已開始關(guān)注和使用它2017-05-05
useCallback是用來幫忙緩存函數(shù)的,當(dāng)依賴項(xiàng)沒有發(fā)生變化時(shí),返回緩存的指針,而props涉及到復(fù)雜對象類型都是通過指針來傳遞到,下面這篇文章主要給大家介紹了關(guān)于useCallback使用的相關(guān)資料,需要的朋友可以參考下2023-02-02
ReactJs實(shí)現(xiàn)樹形結(jié)構(gòu)的數(shù)據(jù)顯示的組件的示例
本篇文章主要介紹了ReactJs實(shí)現(xiàn)樹形結(jié)構(gòu)的數(shù)據(jù)顯示的組件的示例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-08-08
Refs是一個(gè) 獲取 DOM節(jié)點(diǎn)或React元素實(shí)例的工具,在React中Refs 提供了一種方式,允許用戶訪問DOM 節(jié)點(diǎn)或者在render方法中創(chuàng)建的React元素,這篇文章主要給大家介紹了關(guān)于React中refs的一些常見用法,需要的朋友可以參考下2021-07-07
開發(fā)今天給我提了一個(gè)sql編輯器輸入框比較小，不支持放大，不太方便，下面看下我的處理方法，本文基于React+antd，給大家演示一個(gè)完整的全屏demo，感興趣的朋友一起看看吧2021-10-10
React使用useImperativeHandle自定義暴露給父組件的示例詳解
useImperativeHandle?是?React?提供的一個(gè)自定義?Hook,用于在函數(shù)組件中顯式地暴露給父組件特定實(shí)例的方法,本文將介紹?useImperativeHandle的基本用法、常見應(yīng)用場景,需要的可以參考下2024-03-03
這篇文章主要介紹了React使用ref方法與場景，React支持給任意組件添加特殊屬性。ref屬性接受一個(gè)回調(diào)函數(shù)，它在組件被加載或卸載時(shí)會(huì)立即執(zhí)行2022-10-10
React是用于構(gòu)建用戶界面的JavaScript庫，?[1]??起源于Facebook的內(nèi)部項(xiàng)目，該公司對市場上所有?JavaScript?MVC框架都不滿意，決定自行開發(fā)一套，用于架設(shè)Instagram的網(wǎng)站2022-07-07