一、什么是按需加载

和异步加载script的目的一样(异步加载script的方法),按需加载/代码切割也可以解决首屏加载的速度。

  • 什么时候需要按需加载

如果是大文件,使用按需加载就十分合适。比如一个近1M的全国城市省市县的json文件,在我首屏加载的时候并不需要引入,而是当用户点击选项的时候才加载。如果不点击,则不会加载。就可以缩短首屏http请求的数量以及时间。

如果是小文件,可以不必太在意按需加载。过多的http请求会导致性能问题。

二、实现按需加载的方法

  1. Webpack打包模块工具实现
  2. RequireJs实现

这里介绍React-router+Webpack实现按需加载的功能,效果如下:

三、实现过程(React-router4.0)

注意!我这里使用的是最新版本的React-router-dom^4.3.1.如果是4.0以下的react-route可直接看四

4.0相比以前实现方式要复杂。需要引入bundle-loader模块。并且自己创建bundle模型实现。

1.创建包装组件模型bundle.js
  1. import React from 'react';
  2. class Bundle extends React.Component {
  3. constructor(arg){
  4. super(arg)
  5. this.state = {
  6. mod: null,
  7. }
  8. }
  9. componentWillMount() {
  10. this.load(this.props);
  11. }
  12. componentWillReceiveProps(nextProps) {
  13. if (nextProps.load !== this.props.load) {
  14. this.load(nextProps);
  15. }
  16. }
  17. // load 方法,用于更新 mod 状态
  18. load(props) {
  19. // 初始化
  20. this.setState({
  21. mod: null
  22. });
  23. /*
  24. 调用传入的 load 方法,并传入一个回调函数
  25. 这个回调函数接收 在 load 方法内部异步获取到的组件,并将其更新为 mod
  26. */
  27. props.load(mod => {
  28. this.setState({
  29. mod: mod.default ? mod.default : mod
  30. });
  31. });
  32. }
  33. render() {
  34. /*
  35. 将存在状态中的 mod 组件作为参数传递给当前包装组件的'子'
  36. */
  37. return this.state.mod ? this.props.children(this.state.mod) : null;
  38. }
  39. }
  40. export default Bundle ;
2.创建包装组件的方法(函数)
  1. // 懒加载方法
  2. import React from 'react';
  3. import Bundle from './Bundle';
  4. console.log(Bundle);
  5. // 默认加载组件,可以直接返回 null
  6. const Loading = () => <div>Loading...</div>;
  7. /*
  8. 包装方法,第一次调用后会返回一个组件(函数式组件)
  9. 由于要将其作为路由下的组件,所以需要将 props 传入
  10. */
  11. const lazyLoad = loadComponent => props => (
  12. <Bundle load={loadComponent}>
  13. {Comp => (Comp ? <Comp {...props} /> : <Loading />)}
  14. </Bundle>
  15. );
  16. console.log(lazyLoad);
  17. export default lazyLoad; //实际上lazyLoad就是一个函数,组件调用即可

上面两个文件的关系:

lazyLoad.js从名字上看,叫懒加载.实际上是一个中间件的作用。最后lazyLoad会暴露一个函数出来供组件调用。lazyLoad导出的内容:

  1. function lazyLoad(loadComponent) {
  2. return function(props) {
  3. return (
  4. <Bundle load={loadComponent}>
  5. {Comp => (Comp ? <Comp {...props} /> : <Loading />)}
  6. </Bundle>
  7. )
  8. }
  9. }

显而易见,loadComponent就是要加载的组件,在路由中调用,例如:异步调用page1组件

  1. <Route path="/page1" component={lazyLoad(Page1)}/>

Bundle.js作为按需加载的核心,在lazyLoad中间件就已经引入,并传入一个自定义的方法load,值为组件内容。以及动态的子内容children:

  1. {Comp => (Comp ? <Comp {...props} /> : <Loading />)}

最终返回组件信息,并附带相应的props.如果不存在相关组件,则Loading

3. Route搭配使用
  1. import React from 'react';
  2. import { NavLink,Route,Switch,BrowserRouter as Router } from 'react-router-dom'
  3. import './style/style.css'
  4. import 'bundle-loader'
  5. // bundle模型用来异步加载组件
  6. import Bundle from '../routes/Bundle.js';
  7. import lazyLoad from '../routes/lazyLoad';
  8. import Page1 from 'bundle-loader?lazy&name=page1!../components/page1/index';
  9. import Page2 from 'bundle-loader?lazy&name=page2!../components/page2/index';
  10. import Page3 from 'bundle-loader?lazy&name=page3!../components/page3/index';
  11. class AppPage extends React.Component{
  12. constructor(arg){
  13. super(arg)
  14. this.state={}
  15. }
  16. render(){
  17. return(
  18. <Router basename="/" >
  19. <div className="appWried">
  20. <div className="appBtn">
  21. <NavLink to="/page1" className="button" activeClassName="active">
  22. PAGE1
  23. </NavLink>
  24. <NavLink to="/page2" className="button" activeClassName="active">
  25. PAGE2
  26. </NavLink>
  27. <NavLink to="/page3" className="button" activeClassName="active">
  28. PAGE3
  29. </NavLink>
  30. </div>
  31. <Route
  32. path="/"
  33. render={props => (
  34. <Switch>
  35. <Route path="/page1" component={lazyLoad(Page1)}/>
  36. <Route path="/page2" component={lazyLoad(Page2)}/>
  37. <Route path="/page3" component={lazyLoad(Page3)}/>
  38. </Switch>
  39. )}
  40. />
  41. </div>
  42. </Router>
  43. )
  44. }
  45. }
  46. export default AppPage;
  • 几个注意的点:

    1. import异步加载组件的时候,名字变更为'bundle-loader?lazy&name=page1!../components/page1/index'

    其中bundle-loader表示loader:'bunle-loader'(需加载bundle-loader模块)

    lazy表示lazy:true;懒加载

    name:表示异步生成的文件名字

    1. 去掉外层route,不用render渲染也是可行的
    1. <Switch>
    2. <Route path="/page1" component={lazyLoad(Page1)}/>
    3. <Route path="/page2" component={lazyLoad(Page2)}/>
    4. <Route path="/page3" component={lazyLoad(Page3)}/>
    5. </Switch>
  1. //webpack.config.js
  2. ...
  3. module.exports = {
  4. ...
  5. output:{
  6. path:path.join(__dirname + '/dist'), //打包地方
  7. filename:'bundle.js', //打包名字
  8. publicPath: '/', //自动生成html引入js的路径
  9. //按需加载
  10. chunkFilename:'[name]_[chunkhash:8].js'
  11. },
  12. ...
  13. }
  14. ...

这里要注意一下publicPath这个参数.

如果未设置publicPath参数,则默认打包生成的html引入bundle的时候为:

  1. <script type="text/javascript" src="bundle.js"></script>

如果设置publicPath为publicPath: '/dist',则打包后html文件引入js格式为:

  1. <script type="text/javascript" src="/dist/bundle.js"></script>

参考文章:React-router-v4 - Webpack 实现按需加载(code-splitting)

前端性能优化之按需加载(React-router+webpack)的更多相关文章

  1. 阿里无线前端性能优化指南 (Pt.1 加载优化)

    前言 阿里无线前端团队在过去一年对所负责业务进行了全面的性能优化.以下是我们根据实际经验总结的优化指南,希望对大家有所帮助. 第一部分仅包括数据加载期优化. 图片控制 对于网页特别是电商类页面来说,图 ...

  2. Web前端性能优化——如何提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒, ...

  3. 【转】Web前端性能优化——如何提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒, ...

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

    require-ensure和require-amd的区别: require-amd 说明: 同AMD规范的require函数,使用时传递一个模块数组和回调函数,模块都被下载下来且都被执行后才执行回调 ...

  5. vue项目性能优化(路由懒加载、gzip加速、cdn加速)

    前端工程性能优化一说意义深远悠长,本章主要介绍除了一些基础优化外如何实行路由懒加载.Gzip加速.CDN加速,让网页飞的快一些. 基础优化 老生常谈的一些: 不要在模板中写复杂的表达式 慎用watch ...

  6. VUE项目性能优化实践——通过懒加载提升页面响应速度

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 最近我司因业务需求,需要在一个内部数据分析平台集成在线Excel功能,既然我 ...

  7. 页面性能优化:preload预加载静态资源

    本文主要介绍preload的使用,以及与prefetch的区别.然后会聊聊浏览器的加载优先级. preload 提供了一种声明式的命令,让浏览器提前加载指定资源(加载后并不执行),在需要执行的时候再执 ...

  8. React 性能优化之组件动态加载(react-loadable)

    React 项目打包时,如果不进行异步组件的处理,那么所有页面所需要的 js 都在同一文件中(bundle.js),整个js文件很大,从而导致首屏加载时间过长. 所有,可以对组件进行异步加载处理,通常 ...

  9. Web前端性能优化进阶——完结篇

    前言 在之前的文章 如何优化网站性能,提高页面加载速度 中,我们简单介绍了网站性能优化的重要性以及几种网站性能优化的方法(没有看过的可以狂戳 链接 移步过去看一下),那么今天我们深入讨论如何进一步优化 ...

随机推荐

  1. 怎样从外网访问内网PostgreSQL数据库?

    本地安装了一个PostgreSQL数据库,只能在局域网内访问到,怎样从外网也能访问到本地的PostgreSQL数据库呢?本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动PostgreSQ ...

  2. 【web前端】移动端控制台插件,手机端页面查看相关页面控制台信息

    一般调试手机端页面时,基本是在PC端使用手机模式进行断点或console调试.或查看有用的控制台信息的,但依旧有部分功能无法在PC端调试,经常需要使用alert进行断点,然后在手机端看效果,但是这样并 ...

  3. kivy中size和pos的使用

    kivy中位置和大小属性的使用: -------------------位置---------------------------- 1.pos_hint(‘x-axis-key’:value,’y- ...

  4. php定界符<<<EOF讲解

    Heredoc技术.可用来输出大段的html和javascript脚本 1.PHP定界符的作用就是按照原样,包括换行格式什么的,输出在其内部的东西: 2.在PHP定界符中的任何特殊字符都不需要转义:  ...

  5. Golang闭包案例分析与普通函数对比

    闭包案例 package main import ( "fmt" "strings" //记住一定引入strings包 ) //①编写一个函数makeSuffi ...

  6. Cannot resolve reference to bean 'sqlSessionFactory' while setting bean

    今天下载公司以前的一个项目,要和现在的项目进行整合,下载一切顺利,但在开发机器上一跑,憋了. 有两种日志,两种报错:一个是cannot resolve reference to bean 'sqlSe ...

  7. What is probabilistic programming? | 中文翻译

    What is probabilistic programming? | 中文翻译 Probabilistic languages can free developers from the compl ...

  8. es修改数据类型

    环境:es版本:6.5.0 es创建好了mapping后是不允许修改字段类型的,要是我们想修改字段类型怎么办呢,我们可以采用reindex的方法实现,就是创建一个新的mapping,里面的字段类型按照 ...

  9. 自动发现实现url+响应时间监控

    url自动发现脚本: [root@jenkins scripts]# cat  urlDiscovery.py #!/usr/bin/env python #coding:utf-8 import o ...

  10. php 带省略号的分页

    原文链接:https://blog.csdn.net/u011060253/article/details/25308455 $curpage = isset($_GET[; $page = new ...