本篇文章给大家带来的内容是关于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');}// 或者使用asyncasync 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');const Foo = require.ensure([], () => { require("Foo");}, err => { console.error("We failed to load chunk: " + err);}, "chunk-name");//react-router2 or 3
登录后复制
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 正常使用
登录后复制
原理 ： https://github.com/rongchangh…
以上就是React路由懒加载实现的另种方案（代码）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2738404.html
