Une autre solution pour l'implémentation du chargement paresseux du routage React (code)

Le contenu de cet article concerne une autre solution (code) pour l'implémentation du chargement paresseux du routage React. Elle a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Cet article présente brièvement plusieurs solutions d'implémentation pour le chargement paresseux des routes dans React.

Les deux méthodes traditionnelles

import()

Conforme à la syntaxe import() proposée par ECMAScript, qui est cohérente avec l'instruction d'importation ordinaire ou require function Similaire à , mais renvoie un objet Promise. Cela signifie que les modules sont chargés de manière asynchrone à l'aide de

webpack v2+ à l'aide de

à l'aide de

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 Utilisation spécifiée

webpack v1 v2 Utilisation spécifiée

Utilisation

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

par rapport à Pour les deux premiers, ceci la manière d’écrire est plus concise.

Comment utiliser

// webpack 配置文件中 使用lazyload-loader（必须将lazuyload-loader 放置在use的最右侧）

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

Dans le code des affaires

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

Principe : https://github.com/rongchangh...

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!