react webpack 按需加载初试

原创 2016年12月02日 18:55:27

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

react按需加载

react-router webpack 按需加载,与路由权限控制 说明 当网站规模越来越大,通过webpack 打包后的 react 项目也会越来越大,这会导致首页渲染时间变长,影响用...
  • mjzhang1993
  • mjzhang1993
  • 2017年02月07日 18:34
  • 3672

React-router中,结合webpack实现按需加载

简要介绍:在React-router中,暴露了3个接口,如果结合webpack的code splitting,就通过切换路由实现按需加载。1.webpack的code splittingwebpack...
  • liwusen
  • liwusen
  • 2016年12月30日 16:16
  • 5018

create-react-app按需加载以及部署

闲来无事,就想着把前几天折腾的问题重新梳理一遍,加深印象. 上面一篇文章有提到升级eject的cra项目.为什么升级这个项目,就是想要折腾,就是想要使用到webpack2,还有一个好处是加深对cre...
  • hesongGG
  • hesongGG
  • 2017年09月27日 09:54
  • 997

React-router4 使用bundle-loader实现按需加载(code-splitting)

一、参考链接:  1.官网:https://reacttraining.com/react-router/web/guides/code-splitting/code-splitting-serve...
  • dKnightL
  • dKnightL
  • 2018年02月05日 17:16
  • 91

Webpack + react-router 按需加载

webpack + react-router 按需加载关键函数require.ensure(dependencies, callback, chunkName) 详情请见官方文档webpack 配置...
  • qq_24581629
  • qq_24581629
  • 2017年07月13日 11:42
  • 597

React第三方组件1(路由管理之Router的使用④按需加载-上)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件1(路由管理之Router的使用①简单使用)---2018...
  • oKeYue
  • oKeYue
  • 2018年01月25日 10:17
  • 34

react-router4 实现按需加载

按需加载的背景 https://juejin.im/post/58f9717e44d9040069d06cd6?utm_source=tuicool&utm_medium=referral ...
  • sinat_17775997
  • sinat_17775997
  • 2017年04月21日 17:11
  • 5872

react-router 按需加载

React Router 是一个非常出色的路由解决方案,同时也非常容易上手。但是当网站规模越来越大的时候,首先出现的问题是 Javascript 文件变得巨大,这导致首页渲染的时间让人难以忍受。实际上...
  • u010977147
  • u010977147
  • 2016年12月06日 17:28
  • 4686

webpack学习笔记(代码分割,按需加载)

为什么需要代码分割和按需加载代码分割就是我们根据实际业务需求将代码进行分割,然后在合适的时候在将其加载进入文档中。 举个简单的例子: 1.一个HTML中存在一个按钮 2.点击按钮出现一个包着图片...
  • yangyiboshigou
  • yangyiboshigou
  • 2017年03月31日 18:47
  • 6612

vue项目优化之页面的按需加载(vue+webpack)

vue+webpack实现页面的按需加载         通过vue写的单页应用时,可能会有很多的路由引入。就像图片的懒加载一样,如果客户根本就没有看到那些图片,而我们却在打开页面的时候全部给加载完了...
  • wang1006008051
  • wang1006008051
  • 2017年09月22日 20:46
  • 3087
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:react webpack 按需加载初试
举报原因:
原因补充:

(最多只允许输入30个字)