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个资源文件,每次迭代都需要更新多个资源,容易出错,增大人为出错概率
阅读更多
文章标签: 前端 webpack
个人分类: react reactjs
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭