溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

React路由懶加載如何實現

發布時間:2020-10-20 16:43:56 來源:億速云 閱讀:266 作者:小新 欄目:web開發

這篇文章給大家分享的是有關React路由懶加載如何實現的內容。小編覺得挺實用的,因此分享給大家做個參考。一起跟隨小編過來看看吧。

傳統的兩種方式

import()

符合ECMAScript提議的import()語法,該提案與普通 import 語句或 require 函數的類似,但返回一個 Promise 對象。這意味著模塊時異步加載的

webpack v2+ 使用

使用方式

function component() {
  return import( /* webpackChunkName: "lodash" */ 'lodash').then(_ => {
    var element = document.createElement('p');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    return element;
  }).catch(error => 'An error occurred while loading the component');
}

// 或者使用async

async function getComponent() {
  var element = document.createElement('p');
  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的最右側)

module: {
    rules: [
      {
        test: /\.(js|jsx)$/,,
        use: [
          'babel-loader',
          'lazyload-loader'
        ]
      },

業務代碼中

 // 使用lazy! 前綴 代表需要懶加載的Router
 
 import Shop from 'lazy!./src/view/Shop';
 
 // Router 正常使用
  <Route path="/shop" component={Shop} />

感謝各位的閱讀!關于React路由懶加載如何實現就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女