189 8069 5689
这篇文章主要为大家展示了“React-router中结合webpack实现按需加载的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“React-router中结合webpack实现按需加载的示例分析”这篇文章吧。
创新互联是一家专业提供文安企业网站建设,专注与成都网站设计、做网站、H5场景定制、小程序制作等业务。10年已为文安众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。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不能在任何地方引入按需加载的组件。
以上是“React-router中结合webpack实现按需加载的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联网站建设公司行业资讯频道！
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。