基于react-router4.0与react-loadable的Webpack代码分片
发布于 7 年前 作者 DestinyMajesty 3271 次浏览 来自 分享

代码分片

  • 引用webpack官方文档：“代码分片是webpack最引人注目的特性之一。 这个特性允许你将你的代码分成不同的bundle，然后可以按需或并行加载。 如果使用得当，可以对加载时间产生重大影响。”；
  • 代码分片有不同的粒度，可以是根据不同URL的来分割代码，当请求到对应的URL的时候，再去加载相应的代码文件；也可以更加某些事件触发来分割代码，比如，某个组件是在点击了某个按钮后，才会出现的，可以当点击某个按钮的时候，再去加载相应的组件代码；
  • 我这里主要用的就是根据URL来分割代码，所以用到的是react-router4.0 + loadable + webpack来进行代码分片的

具体实现

我这里用到了webpack的Code Splitting的Dynamic Imports，即import(‘path/to/module’) -> Promise 函数。webpack在打包的时候，当遇到import(path/to/module)函数时候，就会自动启用代码分片了，把函数参数中的文件分割出来，在需要使用的时候，再去加载。

  • webpack的配置如下，webpack.config.js文件：
  const path = require('path');
  const webpack = require('webpack');
  module.exports = {
    entry: {
      index: './src/index.js'
    },
    plugins: [
      new webpack.optimize.CommonsChunkPlugin({
        name: 'common' // Specify the common bundle's name.
      })
    ],
    output: {
      filename: '[name].bundle.js',
      chunkFilename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };
  • webpack的入口文件：./src/index.js文件的代码如下：
import React from 'react';
import ReactDOM from 'react-dom';
import RootRoute from './routes';

ReactDOM.render(<RootRoute/>, document.getElementById('root'));
  • 根router文件 ./src/index.js 文件的代码如下：
import React from 'react'
import {
    BrowserRouter as Router,
    Route,
    Link,
    Switch,
    Redirect,
} from 'react-router-dom';

import home from './components/home';
import users from './componets/users';

const BasicExample = () => (
    <div>
        <ul>
            <li><Link to="/home">首页</Link></li>
            <li><Link to="/users">用户</Link></li>
        </ul>
        <hr />
        <Switch>
            <Redirect exact from="/" to="/home" />
            <Route path="/home"  component={home} />
            <Route path="/users"  component={users} />
        </Switch>
    </div>
)
export default BasicExample

这就是react-router4.0的典型实现方式，<link/>组件用于导航，点击可跳转到to属性的地址； <Redirect/>组件用于重定向； <Route/>组件就是具体的router，当URL与path属性匹配的时候，会显示component属性的内容。 具体的使用请看react-router的文档。

  • 在来看关键的users组件的实现方式，这里就用到了import(‘path/to/module’) -> Promise；
  • ./src/components/users/index.js
import Loadable from 'react-loadable';

export default Loadable({
	loader: () => import('./userspage.js'),
	loading() {
	    return <div>Loading...</div>
	}
});

这里用到了react-loadable库，这是一个非常好用的库。需要传入一个用于加载组件的函数，和一个组件在加载时，用来占位显示 “Loading” 状态的组件。 userspage.js就是用户页面的具体实现。

  • 经过我们的这些处理后，用户页面userpage.js会在webpack打包的时候，被分片为单独的文件，只有当我们在访问用户页面，比如输入URL：localhost/users的时候，才会去加载它。
回到顶部