Eine weitere Lösung für die Lazy-Loading-Implementierung des React-Routings (Code)

Was dieser Artikel Ihnen bringt, ist eine weitere Lösung (Code) für die Lazy-Loading-Implementierung von React Routing. Ich hoffe, dass er für Sie hilfreich ist.

In diesem Artikel werden kurz mehrere Implementierungslösungen für das verzögerte Laden von Routen in React vorgestellt.

Die traditionellen zwei Möglichkeiten

import()

Entspricht der von ECMAScript vorgeschlagenen import()-Syntax, die mit der normalen Importanweisung übereinstimmt oder require-Funktion Ähnlich wie , gibt aber ein Promise-Objekt zurück. Dies bedeutet, dass Module, die asynchron

Webpack v2+ mit

geladen werden, mit

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-Nutzungsmethode

Webpack v1 v2 Geben Sie die Verwendungsmethode an

Nutzungsmethode

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

Im Vergleich zu den ersten beiden, Auf diese Weise das Schreiben ist prägnanter.

So verwenden Sie

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

Prinzip im Geschäftscode: https://github.com/rongchangh...

Das obige ist der detaillierte Inhalt vonEine weitere Lösung für die Lazy-Loading-Implementierung des React-Routings (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!