首页 > 作文

React中代码分割的4种实现方式

更新时间:2023-04-04 18:32:39 阅读: 评论:0

目录
前言import()react.lazyimport() + react loadableumijs 按需加载总结

前言

在 react 应用中,我们通常的做法是直接将某个模块导入到页面中,这样做导致物理复习的结果是打包出来的包体积过大。尤其是在引入了体积巨大的第三个库的情况下,打包后的包体积会十分巨大。因此,我们需要关注我们的应用中所包含的代码,以避免因体积过大而导致加载时间过长。

对代码进行分割能够“懒加载”当前用户所需要的内容,能够显著提高应用的性能。尽管并没有减少应用的整体代码体积,但可以避免加载用户永远不需要的代码,并在初始加载的时候可以减少所需加载的代码量。

下面,我们分别来介绍下在 react 中实现代码分割的几种方式。

import()

import() 是 webpack 提供的用于分割代码的一个方法。该方法的返回结果是promi,当文件加载完成后悔将模块导出给 promi.then 方法的回调。

例如有一个 math 模块,导出了 add方法和 minus 方法:

export const add = (a, b) => {return a + b;}export const minus = (a, b) => {return a - b;}

通常的做法是在页面直接引入模块:

import { add } from './math'console.log(add(5, 10));

使用 import 动态导入模块:

import('./math').then((math) => {console.log(math.add(5, 10))})

当 webpack 解析到该语法时,会自动进行代码分割。如果是使用 create react app 创建的 react 应用,import 功能已开箱即用。

import react, { component } from 'react';class app extends component {  handleclick = () => {    import('./math')      .then(({ add }) => {        add(5, 10)      })      .catch(err => {        // handle failure      });  };  render() {    return (      <div>        <button onclick={this.handleclick}>两数相加</but自我介绍作文300字ton>      </div>    );  }}export default app;

react.lazy

react.lazy 方法可以让我们动态加载组件,有助于缩减打包后 bundle 的体积,并延迟加载在初次渲染时未用到的组件。

react.lazy 接受一个函数,这个函数需要动态调用 import()。它必须返回一个 promi,该 promi 需要 resolve 一个 export default 的 react 组件。

const asynccomponent = react.lazy(() => import('./othercomponent'));

react.lazy 返回的是一个异步组件 不能单独使用,需要配合 react.suspen 使用。当这个异步组件的状态是 pending 时显示的是 suspen 中 fallback 的内容,只有 resolve 时才会显示加载好的组件。如此使得我们可以在使用 lazy 组件时做优雅降级(如在 fallback添加 loading 效果等)。

import react, { suspen } from 'react';const asynccomponent = react.lazy(() => import('./othercomponent'));function mycomponent() {  return (    <difriends 第一季v>      <suspen fallback={&亩与平方米换算lt;div>loading...</div>}>        <asynccomponent />      </suspen>    </div>  );}

import() + react loadable

react loadable 是一北京的画室个轻量级的代码分割组件,它是一个高阶组件,能让你的应用程序在渲染之前动态的加载任何模块。

使用 import() + react loadable ,能优雅的实现基于 react-router 4.x 版本的路由分割:

import loadable from 'react-loadable';const loadablebar = loadable({  loader: () => import('./components/bar'),  loading() {    return <div>loading...</div>  }});class mycomponent extends react.component {  render() {    return <loadablebar/>;  }}

在实际业务开发中,我们通常会使用一些框架来快速开发react应用。在这些框架中,通常都会提供按需加载的功能。下面,我们来看看 umijs 框架中的按需加载。

umijs 按需加载

umijs 是一个可扩展的企业级前端应用框架,它以路由为基础,支持配置式路由和约定式路由。umijs 封装了一个 dynamic 组件来实现代码分割。

启用按需加载

umijs 的按需加载功能默认是关闭的,需要在使用之前通过配置开启。在 umijs 项目中添加如下的配置开启:

export default {  dynamicimport: {},}

使用按需加载

首先封装一个异步组件:

import { dynamic } from 'umi';export default dynamic({  loader: async function() {    // 这里的注释 webpackchunkname 可以指导 webpack 将该组件 hugea 以这个名字单独拆出去    const { default: hugea } = await import(/* webpackchunkname: "external_a" */ './hugea');    return hugea;  },});

然后使用封装好的异步组件:

import react from 'react';import asynchugea from './asynchugea';export default () => {  return <asynchugea />;}

总结

到此这篇关于react中代码分割的文章就介绍到这了,更多相关react代码分割内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com!

本文发布于:2023-04-04 18:32:38,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/781626051ed97bab7498d5335ca4d367.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:React中代码分割的4种实现方式.doc

本文 PDF 下载地址:React中代码分割的4种实现方式.pdf

标签:加载   组件   代码   按需
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图