React-router中结合webpack实现按需加载实例
简要介绍：在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不能在任何地方引入按需加载的组件。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
目前好像只有table组件有实现表格数据的全选功能,如果说对于list,card,collapse等其他组件来说,需要自己结合checkbox来手动实现全选功能,这篇文章主要介绍了react antd checkbox实现全选、多选功能,需要的朋友可以参考下2024-07-07
react中关于函数调用()与bind this的原因及分析
这篇文章主要介绍了react中关于函数调用()与bind this的原因及分析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
React 中hooks之 React.memo 和 useMemo用法示例总结
React.memo是一个高阶组件,用于优化函数组件的性能,通过记忆组件渲染结果来避免不必要的重新渲染,合理使用React.memo和useMemo可以显著提升React应用的性能,本文介绍React 中hooks之 React.memo 和 useMemo用法总结,感兴趣的朋友一起看看吧2025-01-01
这篇文章主要介绍了详解react的两种动态改变css样式的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要给大家介绍了关于React如何利用Antd的Form组件实现表单功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了React路由中的redux和redux知识点拓展，文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的朋友可以参考学习一下2022-08-08
这篇文章主要介绍了Antd react上传图片格式限制的实现代码,本文通过实例代码图文效果给大家介绍的非常详细,感兴趣的朋友一起看看吧2024-12-12
下面小编就为大家带来一篇简单谈谈React中的路由系统。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
邮箱、手机验证码输入是许多在线服务和网站常见的安全验证方式之一,本文主要来和大家讨论一下如何使用React封装一个验证码输入控件,感兴趣的可以了解下2024-03-03
react-router-dom入门使用教程(路由的模糊匹配与严格匹配)
这篇文章主要介绍了react-router-dom入门使用教程,主要介绍路由的模糊匹配与严格匹配，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
最新评论