staticrouter延迟加载

发布网友发布时间：2022-04-27 00:35

我来回答

共2个回答

懂视网时间：2022-04-22 17:52

本篇文章给大家带来的内容是关于React路由懒加载实现的另种方案（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

这篇文字简单的介绍了React在路由懒加载方面的几种实现方案。

传统的两种方式

import()

符合ECMAScript提议的import()语法，该提案与普通 import 语句或 require 函数的类似，但返回一个 Promise 对象。这意味着模块时异步加载的

webpack v2+ 使用

使用方式

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 指定使用方式

使用方式

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 配置文件中 使用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...

热心网友时间：2022-04-22 15:00

延迟加载路由也称路由懒加载。当应用变得复杂之后，路由组件也会随之增加，在这个时候Webpack的打包机制会将我们的项目中的所有JavaScript打包成一个文件(除了public目录下的JS文件)，这样一来这个JS文件会变得特别大，会拖慢浏览器的加载速度。为此，可以结合Vue的异步组件和Webpack的代码分割功能，从而实现延迟加载，也就是路由懒加载。
在React中，我们可以使用Webpack通过代码拆分来延迟加载组件和路由。通过将我们的应用程序分成多个块，我们可以仅加载和评估呈现页面所需的代码。