基于react-router4.0与react-loadable的Webpack代码分片
发布于 3 个月前 作者 DestinyMajesty 618 次浏览 来自 分享

代码分片

  • 引用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的时候,才会去加载它。
回到顶部