秒速赛车技巧-秒速赛车规律_官网-秒速赛车走势图
当前位置:主页 > 秒速赛车技巧 > 正文

秒速赛车开奖时间使用webpack和react router 4实现代

  众所周知,在使用webpack打包react应用时,webpack将整个应用打包成一个js文件,当用户访问首屏时,会一次性加载整个js文件,当应用的规模变得越来越庞大的时候,首屏渲染速度变慢,影响用户体验。

  于是,webpack开发了代码分割的特性, 此特性能够把代码分割为不同的bundle文件,然后可以通过路由按需加载或并行加载这些文件。秒速赛车开奖时间

  代码分割可以用于获取更小的bundle,以及控制资源加载优先级,如果使用合理,会极大影响加载时间。有三种常用的代码分割方法:

  3、动态导入:通过模块的内联函数调用来分离代码。本文只讨论动态导入(dynamic imports)的方法。

  当涉及到动态代码拆分时,webpack提供了两个类似的技术。对于动态导入,第一种,也是优先选择的方式是,使用符合ECMA提案的 import() 语法。第二种,则是使用 webpack 特定的 require.ensure。本文使用第一种方式。

  React应用的代码分割需要结合路由库react-router使用,当前react-router的版本是V4,在使用react-router4进行代码分割的路上,社区已经有成熟的第三方库进行了实现,如react-loadable。在此处将介绍如何不借助第三方库实现代码分割。

  此处假设你已经对react、react-router4、webpack有基本的了解,可以搭建简单的开发环境。下面是本项目的基本目录结构:

  在App.js中,引入react-router-dom路由模块,以及路由配置文件routes.js,App组件主要负责通过路由配置遍历生成一系列路由组件。

  同时,这种传入一个函数作为参数,而非直接传入一个字符串的写法能够让webpack意识到此处需要进行代码分割。

  下面需要编写babel配置文件.babelrc,在根目录下新建.babelrc,配置如下:

  整个模块是一个高阶组件,返回一个新的组件,传入两个参数,一个是需要动态加载组件的方法,第二个是动态加载时的占位符,占位符的默认参数为一个字符串,也可以传入一个Loading组件。

  使用acync定义异步方法,componentDidMount中,使用await异步执行传入的第一个参数,用于动态加载当前路由的组件。

  当调用ES6模块的import()方法(引入模块)时,必须指向模块的.default值,因为它才是promise 被处理后返回的实际的module对象。

  故此处使用ES6的对象解构获取到模块的default并赋值到Child上。

  在render方法中,从state中获取Child,然后使用三元运算符判断Child是否存在,存在则渲染Child组件,并传入this.props,否则渲染占位符。

  现在开始编写一些简单的业务组件用于测试,在containers中新建两个文件夹home和detail,在两个文件夹下编写index.js作为两个路由组件。代码如下:

  查看右侧network面板,可以看到页面先加载了main.js和0.js,点击详情按钮跳转到

  随后加载了1.js,这样就实现了代码分割,每个路由都是动态加载的。在大型React应用中,将bundle进行细粒度的拆分,可以极大提升首屏渲染速度,提升用户体验。

版权保护: 本文由 主页 原创,转载请保留链接: http://www.ecentiv.com//html/729.html