React ルーティングの遅延読み込み実装のための別のソリューション (コード)

この記事の内容は、React ルーティングの遅延読み込み実装に関する別のソリューション (コード) に関するもので、必要な方は参考にしていただければ幸いです。

この記事では、React でのルートの遅延読み込みのためのいくつかの実装ソリューションを簡単に紹介します。

従来の 2 つの方法

import()

ECMAScript によって提案された import() 構文に準拠しており、通常の import ステートメントまたはrequire 関数 と似ていますが、Promise オブジェクトを返します。これは、webpack で指定された

usage

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 v2 に対して非同期的にロードされることを意味します。使用方法

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

最初の 2 つと比較すると、この書き方の方が簡潔です。

使用法

// 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} />

原則: https://github.com/rongchangh...

##

以上がReact ルーティングの遅延読み込み実装のための別のソリューション (コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。