React-router中结合webpack实现按需加载实例_网络技术

React-router中结合webpack实现按需加载实例

发布时间 - 2026-01-11 01:17:17 点击率：次

简要介绍：在React-router中，暴露了3个接口，如果结合webpack的code splitting，就通过切换路由实现按需加载。

1.webpack的code splitting

webpack可以通过一些方法，来实现按需加载，暴露的接口为require.ensure

require.ensure(["module-a", "module-b"], function() {
 var a = require("module-a");
 // ...
});

这个require.ensure保证了模块的异步调用，当callback回调中调用了一个模块的时候，可以实现按需加载。

2.React-router实现按需加载的接口

React-router定义了 getChildRoutes, getIndexRoute, getComponents这样3个方法，这3个方法是异步的，并且只在需要的时候调用，通过这3个方法定义的路由，我们称之为“渐进式路由匹配”，React-router在匹配到路由时，只是渐进式的加载改路由所需要的组件，这样就能实现按需加载。

（1）webpack的配置：

 output: {
    path: __dirname + '/dist/js/',
    publicPath:'/js/',
    filename: '[name].js',
    chunkFilename: '[name].[chunkhash:5].chunk.js'
  },

在这里我们加上了chunkFilename：…. 这句代码用于分割js，特别注意publicPath这个路径要与服务器的资源的路径对应，否则加载js的时候会出现404错误。

（2）通过getComponents等3个方法重新配置路由

export const routes={
 path:'/',
 getComponent(nextState,callback){
  require.ensure([],require=>{
   callback(null,require('../components/nav').default);
  },'nav');
 },
 indexRoute:{
  getComponent(nextState,callback){
   require.ensure([],require=>{
    callback(null,require('../components/examine').default);
   },'examine');
  }
 },
 childRoutes:[{
  path:'examine',
  getComponent(nextState,callback){
   require.ensure([],require=>{
    callback(null,require('../components/examine').default);
   },'examine');
   }
 },
 {
  path:'admin',
  getComponent(nextState,callback){
   require.ensure([],require=>{
    callback(null,require('../components/admin').default);
   },'admin');
  }
 },
 {
  path:'history',
  getComponent(nextState,callback){
   require.ensure([],require=>{
    callback(null,require('../components/history').default);
   },'history');
  }
 },
 {
  path:'feedback',
  getComponent(nextState,callback){
   require.ensure([],require=>{
    callback(null,require('../components/feedback').default);
   },'feedback')
  }
 }
]
};

这里我们将路由定义中的component替换成了 getComponent。

（3）最后效果：

首页时候，加载了examine.js和nav.js：

切换路由时，比如从首页切换到了商品管理，这样除了加载examine.js外，多加载了admin.js：

（4）总结：

我们看到react-router的按需加载，作用主要表现在可以减少首页请求的文件的大小。

3.注意事项：

1、require(‘components/Index').default中require方法的参数不能使用变量，只能使用字符串！

2、如果你的组件是使用es5的module.exports导出的话，那么只需要require(‘components/Index')即可。而如果你的组件是使用es6的export default导出的话，那么需要加上default！例如：require(‘components/Index').default

3、如果在路由页面使用了按需加载（require.ensure）加载路由级组件的方式，那么在其他地方（包括本页面）就不要再import了，否则不会打包生成chunk文件。简而言之，需要按需加载的路由级组件必须在路由页面进行加载。

特别是第3点，笔者就是因为这个原因导致按需加载失败，特别注意import不能在任何地方引入按需加载的组件。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# webpack # react # router # router按需加载 # webpack按需加载react # Vue.js中用webpack合并打包多个组件并实现按需加载 # 详解vue项目优化之按需加载组件-使用webpack require.ensure # 浅谈vue项目优化之页面的按需加载(vue+webpack) # vue按需加载组件webpack require.ensure的方法 # webpack学习笔记之代码分割和按需加载的实例详解 # Webpack按需加载打包chunk命名的方法 # 加载 # 按需 # 首页 # 渐进式 # 在这里 # 成了 # 就能 # 上了 # 可以通过 # 只需要 # 只在 # 可以实现 # 本页面 # 所需要 # 来实现 # 这句 # 多加 # 回调 # 大家多多 # 可以减少

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：python urlopen()「建议收藏」

下一篇：被建站宝盒“坑”了？来看看这些避免受骗的技巧

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：python urlopen()「建议收藏」

下一篇：被建站宝盒“坑”了？来看看这些避免受骗的技巧