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-router中,结合webpack实现按需加载

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

react按需加载

react-router webpack 按需加载,与路由权限控制说明 当网站规模越来越大,通过webpack 打包后的 react 项目也会越来越大,这会导致首页渲染时间变长,影响用户体验,we...

react-router实现按需加载

本文使用的 react-router 版本为 2.8.1React Router自己就有一套按需加载解决方案,将代码拆分成多个小包,在浏览过程中实现按需加载;如过你的项目搭配了webpack打包工具,...

react-router 按需加载

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

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

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

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

vue+webpack实现页面的按需加载         通过vue写的单页应用时,可能会有很多的路由引入。就像图片的懒加载一样,如果客户根本就没有看到那些图片,而我们却在打开页面的时候全部给加载完了...

webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)

webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件) 最近在项目中使用了一下webpack,所以这里打算对目前了解的使用方法做一个小小的总结 为什么是webpack ...
  • likeuzi
  • likeuzi
  • 2017年05月08日 12:42
  • 792

Webpack安装、配置、按需加载

原文地址:http://www.cnblogs.com/skylor/p/7008756.html点击打开链接 如果你: 是前端热爱者 :)有JavaScript/nodejs基础会使...

Webpack 大法中的 Code Splitting ,js文件懒加载。

今天,大家要学习的内容是 Webpack 大法中的 Code Splitting 。 Code Splitting 是什么以及为什么 在以前,为了减少 HTTP 请求,通常地,我们都会把所...
  • zjw0742
  • zjw0742
  • 2017年07月06日 10:01
  • 473

vue项目优化之按需加载组件-使用webpack require.ensure

使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build  会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash]...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:react webpack 按需加载初试
举报原因:
原因补充:

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