傳統的兩種方式

1.import()

符合ECMAScript提議的import()語法，該提案與普通 import 語句或 require 函數的類似，但返回一個 Promise 對象。這意味著模塊時異步加載的

function component() {return import( /* webpackChunkName: "lodash" */ 'lodash').then(_ => {var element = document.createElement('div');element.innerHTML = _.join(['Hello', 'webpack'], ' ');return element;}).catch(error => 'An error occurred while loading the component'); }// 或者使用asyncasync function getComponent() {var element = document.createElement('div');const _ = await import(/* webpackChunkName: "lodash" */ 'lodash');element.innerHTML = _.join(['Hello', 'webpack'], ' ');return element; }

　

2.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} />

3.lazyload-loader

相對于前兩種，此種方式寫法更為簡潔。

使用方式

// webpack 配置文件中 使用lazyload-loader（必須將lazuyload-loader 放置在use的最右側）module: {rules: [{test: /\.(js|jsx)$/,,use: ['babel-loader','lazyload-loader']},

業務代碼中

// 使用lazy! 前綴 代表需要懶加載的Routerimport Shop from 'lazy!./src/view/Shop';// Router 正常使用 <Route path="/shop" component={Shop} />

?

轉載于:https://www.cnblogs.com/yuerdong/p/10605856.html

總結

以上是生活随笔為你收集整理的React ----- 路由懒加载的几种实现方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。