webpack and react-router按需加載

lowett 發布于2019-08-23 15:37 / 1285人閱讀

原理：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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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