react webpack 按需加载初试

react webpack 按需加载初试

1：为什么要按需加载

• 【直接打包】React实现单页面运用时，当项目较小或者页面较少的情况下可以无需打包成多个文件，因为即使前端代码有10M,在通过webpack压缩打包，再通过GZIP压缩后一般也就400k,在一面正常的pc系统中400k的大小是可接受的。
• 【按需加载】但当你的应用稍微复杂一点点，包括依赖后，打包后的文件都是挺大的。而我们加载的时候，不管那些代码有没有执行到，都会下载下来。对于对系统性能要求较高，对代码有‘洁癖’的开发者来说，任何性能的浪费都是不可接受的，所以 我们 只下载我们需要执行的代码的 话，那么可以节省相当大的流量。也就是我们所说的 按需加载

2：webpack按需加载

官方介绍，这里简单介绍下关键信息
- 按需加载函数

require.ensure(dependencies, callback, chunkName)

这个方法可以实现js的按需加载，分开打包，webpack 管它叫 chunk

• webpack 对应配置

• webpack配置文件配置一下chunk文件输出路径

  module.exports = {
  output: {
  chunkFilename: ‘[name].[chunkhash:8].chunk.js’,
  publicPath: ‘/dist/’
  }
  }
  [name] 默认是 ID，如果指定了chunkName则为指定的名字。
  [chunkhash] 是对当前chunk 经过hash后得到的值，可以保证在chunk没有变化的时候hash不变，文件不需要更新，chunk变了后，可保证hash唯一，由于hash太长，这里我截取了hash的8个字符足矣

3：react-router 按需加载Demo

<Router history={hashHistory}>
            <Route path="/" component={RootContainer}>
                <Route path="RouterOne"
                       getComponent={
                                (nextState,callback)=>{
                                    require.ensure([],(require)=>{
                                        callback(null,require("../containers/RouterOne").default)
                                    },"router_one")
                                }}
                />
                <Route path="RouterTwo"
                       getComponent={
                                (nextState,callback)=>{
                                    require.ensure([],(require)=>{
                                        callback(null,require("../containers/RouterTwo").default)
                                    },"router_two")
                                }}
                />
        </Router>

将会打包成bundle.js,router_one_xxxxx_chunk.js,router_two_xxxxx_chunk.js,三个文件

4：前后端分离的项目中存在的问题

• 当你只打包成一个文件时，每次项目迭代，后端都只需要更改一个文件的路径或者资源
• 当你使用webpack react-router按需打包时，此时将会生成N个资源文件，每次迭代都需要更新多个资源，容易出错，增大人为出错概率