成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

webpack and react-router按需加載

lowett / 1291人閱讀

原理：CommonJS與import() 方法一：CommonJS模塊語法

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

方法

require.ensure(
  dependencies: String[],
  callback: function(require),
  errorCallback: function(error),
  chunkName: String
)
方法二：import()

ES2015 loader規(guī)范定義了import()方法，可以在運(yùn)行時動態(tài)地加載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...
}> );

查看代碼

方法二：利用高階組件

寫一個高階組件用于動態(tài)加載組件

// 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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102347.html

相關(guān)文章

  • React-router 4 按需加載的實(shí)現(xiàn)方式及原理(Code Splitting)

    摘要：的按需加載方式中實(shí)現(xiàn)按需加載只需要按照下面代碼的方式實(shí)現(xiàn)就可以了。配置按需加載方式創(chuàng)建文件這個文件其實(shí)是個通過包裝后的組件來使用，下面會具體講這個東西。 React-router 4 介紹了在router4以后，如何去實(shí)現(xiàn)按需加載Component，在router4以前，我們是使用getComponent的的方式來實(shí)現(xiàn)按需加載的，router4中，getComponent方法已經(jīng)被移除...

    fuchenxuan 評論0 收藏0

  • react-router 按需加載

    摘要：實(shí)際上程序應(yīng)當(dāng)只加載當(dāng)前渲染頁所需的，也就是大家說的代碼分拆將所有的代碼分拆成多個小包，在用戶瀏覽過程中按需加載。這里面有個方法這是提供的方法，這也是按需加載的核心方法。 注：本文使用的 react-router 版本為 2.8.1 React Router 是一個非常出色的路由解決方案，同時也非常容易上手。但是當(dāng)網(wǎng)站規(guī)模越來越大的時候，首先出現(xiàn)的問題是 Javascript 文件變得...

    MingjunYang 評論0 收藏0

  • react-router4 +react-loadable 實(shí)現(xiàn)Code Splitting

    摘要：之前在中文官方文檔使用的是。實(shí)現(xiàn)按需加載，升級之后，這個方法就走不通了。之后看了的官網(wǎng)，按需加載只需要神器。 之前在react-router中文官方文檔使用的是require。ensure實(shí)現(xiàn)按需加載，升級之后，這個方法就走不通了。之后看了react-router的官網(wǎng)，按需加載只需要神器 react-loadable 。react-loadable的好處： 基于import()的自...

    BaronZhang 評論0 收藏0

  • 拒絕Redux文檔“毒害” 一個項(xiàng)目告訴你Redux最新真正哲學(xué)

    摘要：之前分享過幾篇關(guān)于技術(shù)棧的原創(chuàng)文章解析前端架構(gòu)學(xué)習(xí)復(fù)雜場景數(shù)據(jù)設(shè)計干貨總結(jié)打造單頁應(yīng)用一個項(xiàng)目理解最前沿技術(shù)棧真諦一個工程實(shí)例今天進(jìn)一步剖析一個實(shí)際案例移動網(wǎng)頁版。目前面臨的問題在于提高產(chǎn)品的各方面性能體驗(yàn)。 之前分享過幾篇關(guān)于React技術(shù)棧的原創(chuàng)文章： 解析Twitter前端架構(gòu) 學(xué)習(xí)復(fù)雜場景數(shù)據(jù)設(shè)計 React Conf 2017 干貨總結(jié)1: React + ES next ...

    YuboonaZhang 評論0 收藏0

  • react 項(xiàng)目構(gòu)建

    摘要：配置方式找到文件如需添加路由則在里面添加，同時需要后端更改配置除了上面的路徑，其他路徑全部指向單頁應(yīng)用多路由預(yù)渲染指南使用說明源碼為方便快速構(gòu)建項(xiàng)目，本例所有配置的代碼均放在項(xiàng)目中。 寫在前面 每次構(gòu)建react項(xiàng)目的時候都會配置一大堆東西，時間久了就會忘記怎么配置。為了方便自己記憶也為了其他開發(fā)者在構(gòu)建react應(yīng)用時能夠快速開發(fā)，故作此記錄。 本項(xiàng)目基于 create-react-...

    ACb0y 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<