webpack+react-router按需加载入门

最新推荐文章于 2020-06-30 23:35:29 发布

原创最新推荐文章于 2020-06-30 23:35:29 发布 · 726 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #按需加载 #reactRoute

本文介绍如何利用Webpack和React实现路由级别的按需加载，通过具体代码示例展示如何配置Webpack并结合React Router实现首页和其他路由组件的异步加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack+react-router按需加载入门

要理解此篇文章，需要有一定的webpack基础和react-router的基本功哦，废话不多说，下面就直接上代码讲解。

1、文件目录

2、react-router路由配置(index.js 文件)

//引入子路由文件，ensure函数为异步加载的函数

import App from "./js/app";

const detailContainer = (location, cb) => {
  require.ensure([], require => {
      cb(null, require('./js/detail').default) //使用es6语法的export导出组件时，需加上 defalut
  },'detail')
}


//更改Router组件渲染函数
render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="/detail" getComponent={detailContainer} />
    </Route>
  </Router>
), document.getElementById('app'))

注意：首页组件尽量不要用异步方法引入，至少进入网页你得显示点内容吧；

3、主要webapck配置

//这里的注释只标示了react-router按需加载需要更改的配置，其他的基本配置还需要自己理解哦 ^_^
config = {
    entry: {
      desktop: ['babel-polyfill',path.resolve(__dirname,'./src/index.js')],
      vendor: ['react','react-dom'] //需添加，提取公共代码，
    },
    resolve: {
      alias: {}
    },
    output: {
      publicPath: "/build/",
      path: path.resolve(__dirname, 'build'),
      filename: '[name].js',
      chunkFilename: '[name].chunk.js'  //需要添加的配置，name会自动获取文件名
    },
    plugins:[
      new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',  //需要和entry的vendor配合使用
        filename: 'vendor.js'  //生成的公共代码文件名
      })
    ],
    module: {   //解析文件需要的loaders，根据自己需要配置
      loaders: [{
        test: /\.jsx?$/,
        loader: ['babel'],
        query: {
          presets: ['react',  'es2015' , 'stage-0']
        },
        exclude: /node_modules/
      }, {
        test: /\.css$/,
        loader: 'style!css'
      }, {
        test: /\.less$/,
        loader: 'style!css!less'
      },{
        test: /\.(png|jpg|gif)$/,
        loader: 'url-loader',
        query: {
          limit: 108192,
          name: 'images/[name].[hash:8].[ext]'
        }
      }]
    }
  };

4、其他一些文件做的一些操作

inbox.js处理嵌套的路由

export default class Inbox extends Component{
    render() {
        // console.log(this.props);
        // this.props.route.childRoutes
        return (
            <div>
                <ul>
                    <li><Link to="/">返回首页(xxxx)</Link></li>
                    {this.props.route.childRoutes.map((item,i)=>{
                        return <li key={i}><Link to={'/inbox/'+item.path}>{item.title}</Link></li>
                    })}
                </ul>
                {/*不要忘记这里*/}
                {this.props.children}
            </div>
        )
    }
}

app.js首页显示的内容，并做了link路由处理

const App = React.createClass({
    render() {
      return (
        <div>
          <h1>Welcome to the app!</h1>
          <ul>
            <li><Link to="/detail">详情页</Link></li>
            <li><Link to="/inbox">个人中心</Link></li>
          </ul>
          {this.props.children}
        </div>
      )
    }
  })
export default App;

其他的页面都是正常的render页面了，没什么特殊的了

5、css问题

细心的博友可能会问，css文件怎么办？
目前这个demo是把css文件给打包到自己的js文件内了，还没有找到方法把css单独打包出来也按需加载。
之前使用webpack的extract-text-webpack-plugin这个插件尝试分离出css，但是没有成功，欢迎大家给出宝贵的建议。
详细代码：https://github.com/theFrontCalf/webpack-react-router-demandOnLoad.git