React 라우팅(코드)의 지연 로딩 구현을 위한 또 다른 솔루션

이 글의 내용은 React Routing의 지연 로딩 구현을 위한 또 다른 솔루션(코드)에 관한 것입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

이 글에서는 지연 로딩 라우팅에 있어서 React의 여러 구현 솔루션을 간략하게 소개합니다.

전통적인 두 가지 방법

import()

은 ECMAScript에서 제안한 import() 구문을 따르는데, 이는 일반적인 import 문이나 require 함수와 유사하지만 Promise 객체를 반환합니다. 이는 모듈이

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 지정 사용법

webpack v1 v2 지정 사용법

usage

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 v2+가 비동기식으로 로드됨을 의미합니다.

비교됨 처음 두 개를 사용하면 이 작성 방식이 더 간결해집니다.

비즈니스 코드에서

// 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!