webpack and react-router按需加载

lowett 发布于2019-08-23 15:37 / 1354人阅读

原理：CommonJS与import() 方法一：CommonJS模块语法

利用require.ensure,require.ensure()是webpack特有的，已经被import()取代。

方法

</>复制代码 
require.ensure(
  dependencies: String[],
  callback: function(require),
  errorCallback: function(error),
  chunkName: String
)

方法二：import()

ES2015 loader规范定义了import()方法，可以在运行时动态地加载ES2015模块

方法

</>复制代码 
import("Component").then()
// or 在 async中使用
await import("Component")

demo

</>复制代码 
import React, { Component } from "react";
class App extends Component {
  handleClick = () => {
    import("./moduleA")
      .then(({ moduleA }) => {
        // Use moduleA
      })
      .catch(err => {
        // Handle failure
      });
  };
  render() {
    return (
      
        
      
    );
  }
}
export default App;

react-router中使用按需加载

demo地址，此处配合create-react-app使用，自己配置webpack合理需要配置output.fileName和output.chunkFilename

方法一：使用react.lazy

</>复制代码 
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import React, { Suspense, lazy } from "react";
const Program1 = lazy(() => import("./Program1"));
const App = () => (
  
    Loading...

}> );

查看代码

方法二：利用高阶组件

写一个高阶组件用于动态加载组件

</>复制代码 
// async Component
import React, { Component } from "react";
export default function asyncComponent(importComponent) {
  class AsyncComponent extends Component {
    constructor(props) {
      super(props);
      this.state = {
        component: null
      };
    }
    async componentDidMount() {
      const { default: component } = await importComponent();
      this.setState({
        component: component
      });
    }
    render() {
      const C = this.state.component;
      return C ?  : null;
    }
  }
  return AsyncComponent;
}

查看代码

引用并使用该高阶组件做按需加载

</>复制代码 
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import asyncComponent from "./asyncComponent";
import React, { Suspense } from "react";
const Progran2 = asyncComponent(() => import("./Program2"));
const App = () => (
  
    Loading...

}> );

查看代码

以上两种方法都是react官方推荐code-splitting

云服务器 GPU云服务器 webpack按需加载按需加载按需加载javascript react-router

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102347.html

React-router 4 按需加载的实现方式及原理(Code Splitting)

摘要：的按需加载方式中实现按需加载只需要按照下面代码的方式实现就可以了。配置按需加载方式创建文件这个文件其实是个通过包装后的组件来使用，下面会具体讲这个东西。 React-router 4 介绍了在router4以后，如何去实现按需加载Component，在router4以前，我们是使用getComponent的的方式来实现按需加载的，router4中，getComponent方法已经被移除...

fuchenxuan 2019-08-21 15:50 评论0 收藏0
react-router 按需加载

摘要：实际上程序应当只加载当前渲染页所需的，也就是大家说的代码分拆将所有的代码分拆成多个小包，在用户浏览过程中按需加载。这里面有个方法这是提供的方法，这也是按需加载的核心方法。注：本文使用的 react-router 版本为 2.8.1 React Router 是一个非常出色的路由解决方案，同时也非常容易上手。但是当网站规模越来越大的时候，首先出现的问题是 Javascript 文件变得...

MingjunYang 2019-08-21 14:35 评论0 收藏0
react-router4 +react-loadable 实现Code Splitting

摘要：之前在中文官方文档使用的是。实现按需加载，升级之后，这个方法就走不通了。之后看了的官网，按需加载只需要神器。之前在react-router中文官方文档使用的是require。ensure实现按需加载，升级之后，这个方法就走不通了。之后看了react-router的官网，按需加载只需要神器 react-loadable 。react-loadable的好处：基于import()的自...

BaronZhang 2019-08-22 16:58 评论0 收藏0
拒绝Redux文档“毒害” 一个项目告诉你Redux最新真正哲学

摘要：之前分享过几篇关于技术栈的原创文章解析前端架构学习复杂场景数据设计干货总结打造单页应用一个项目理解最前沿技术栈真谛一个工程实例今天进一步剖析一个实际案例移动网页版。目前面临的问题在于提高产品的各方面性能体验。之前分享过几篇关于React技术栈的原创文章：解析Twitter前端架构学习复杂场景数据设计 React Conf 2017 干货总结1: React + ES next ...

YuboonaZhang 2019-08-22 11:04 评论0 收藏0
react 项目构建

摘要：配置方式找到文件如需添加路由则在里面添加，同时需要后端更改配置除了上面的路径，其他路径全部指向单页应用多路由预渲染指南使用说明源码为方便快速构建项目，本例所有配置的代码均放在项目中。写在前面每次构建react项目的时候都会配置一大堆东西，时间久了就会忘记怎么配置。为了方便自己记忆也为了其他开发者在构建react应用时能够快速开发，故作此记录。本项目基于 create-react-...

ACb0y 2019-08-23 11:54 评论0 收藏0