欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-20 10:43:06
简要介绍:在react-router中,暴露了3个接口,如果结合webpack的code splitting,就通过切换路由实现按需加载。 1.webpack的code...

简要介绍:在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:

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

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

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

(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不能在任何地方引入按需加载的组件。

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