Heim > Web-Frontend > js-Tutorial > Eine weitere Lösung für die Lazy-Loading-Implementierung des React-Routings (Code)

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

不言
Freigeben: 2018-10-23 15:30:32
nach vorne
3909 Leute haben es durchsucht

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;
}
Nach dem Login kopieren

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} />
Nach dem Login kopieren

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'
        ]
      },
Nach dem Login kopieren

 // 使用lazy! 前缀 代表需要懒加载的Router
 
 import Shop from 'lazy!./src/view/Shop';
 
 // Router 正常使用
  <Route path="/shop" component={Shop} />
Nach dem Login kopieren
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!

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage