关闭

react webpack 按需加载初试

标签: 前端webpack
3074人阅读 评论(0) 收藏 举报
分类:

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个资源文件,每次迭代都需要更新多个资源,容易出错,增大人为出错概率
1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:91461次
    • 积分:1424
    • 等级:
    • 排名:千里之外
    • 原创:57篇
    • 转载:15篇
    • 译文:0篇
    • 评论:7条
    文章分类