React：打包优化 - 配置路由懒加载

最新推荐文章于 2024-09-09 19:33:25 发布
最新推荐文章于 2024-09-09 19:33:25 发布
阅读量168 收藏
点赞数 3
文章标签： react.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panghuangang/article/details/140906204
版权

什么是路由懒加载

路由懒加载是指路由的js资源只有在被访问时才会动态获取，目的是为了优化本次项目首次打开的时间。

在项目中配置路由懒加载

1）把路由改为由React提供的lazy函数进行动态导入
2）使用React内置的Suspense组件包裹路由中element选项对应的组件
在这里插入图片描述

在这里插入图片描述

在浏览器开发者工具中看网络请求情况，确实实现了懒加载：
访问首页：
在这里插入图片描述

访问文章管理：
在这里插入图片描述

访问创建文章：
在这里插入图片描述

听海边涛声
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
十八、react拓展 - setState - 路由组件懒加载 - Hooks - Fragment - Context - PureComponent - 插槽 - 错误边界 - 组件通信方式总结
快乐de馒头
08-20 323
对象式的setState是函数式的setState的简写方式【语法糖】使用原则如果新状态不依赖于原状态【使用对象方式】如果新状态依赖于原状态 【使用函数方式】如果需要在setState()执行后，获取最新的状态数据，可以在第二个callback函数中读取到异步更新的最新值父子组件兄弟组件（非嵌套组件）祖孙组件（跨级组件）
react-路由懒加载
zm_miner的博客
07-01 1268
路由懒加载是什么意思? 在开发中 , 我们打开开发者工具, 会发现我们刚刚打开就会去加载所有页面. 路由懒加载就是只加载你当前点击的那个模块 按需去加载路由对应的资源, 可以提高加载速度 (一个页面加载过后再次访问不会重复加载) 实现原理：将路由相关的组件，不再直接导入了，而是改写成异步组件的写法，只有当函数被调用的时候，才去加载对应的组件内容 方法一: 重写 首先, 新建一个asynccComponent.js , 作为公共js import {Component as ReactComponet} fr
React学习----路由懒加载
weixin_42429220的博客
01-16 569
React 使用webpack 打包时，会生成一个main.js的文件。当页面组件增多时，main.js 也跟着变大，从而减慢页面的加载速度。使用 compression-webpack-plugin 配合 nginx，将文件压缩，这种方法可行，但是加载首页的时候，效果还是不理想。于是，想到了把main.js 拆分多个。从而减少首屏js大小，加快加载速度。 未用懒加载 Index 组件： class Index extends React.Component { ... } export defaul
React项目打包流程
weixin_50236973的博客
12-26 1898
React项目打包流程
react之项目打包,本地预览,路由懒加载,打包体积分析以及如何配置CDN
Gik99的博客
12-10 1162
react之项目打包,本地预览,路由懒加载,打包体积分析以及如何配置CDN
webpack (十二) -打包部署——路由懒加载 解决 首屏加载慢 的问题 & 打包优化——体积较大的第三方包，使用cdn的安装方式进行加载
weixin_44867717的博客
02-23 865
21-webpack-打包部署——路由懒加载 解决 首屏加载慢 的问题 路由懒加载 解决 登录页首屏加载慢 的问题 路由懒加载：https://router.vuejs.org/zh/guide/advanced/lazy-loading.html 原因：所有第三包打包在一起，资源体积比较大，会导致资源运行时比较慢 echarts包体积比较就比较大，且是局部使用，可以单独进行引入...
react路由懒加载，路由配置化，webpack自动导入saga文件--后台定义配置式路由
阿牛哥的博客
10-11 701
react路由懒加载，路由配置化，webpack自动导入saga文件--后台定义配置式路由
详解webpack + react + react-router 如何实现懒加载
01-19
在 Webpack 1 中主要是由bundle-loader进行懒加载，而 Webpack 2 中引入了类似于 SystemJS 的System.import语法，首先我们对于System.import的执行流程进行简单阐述： Webpack 会在编译过程中扫描代码库时将发现的...
React：react-router动态路由的使用及项目封装路由全过程
热门推荐
JCat的博客
08-26 1万+
一、路由 1.安装 npm install --save react-router npm install --save react-router-dom //使用react-router5以上版本 2. 语法参考文档 react-router-cn：github文档 react-router官方学习文档 router语法学习 3. 路由的作用 单页面刷新（SPA），切换显示视图 初步使用方式：src/app.jsx页面 import React, { Component } from 'react'
react路由懒加载的方式
风的轻扬
05-11 8699
我就使用个路由懒加载，百度一些全是以下的方法，这些方法要是没有用过，肯定懵逼啊， 请问这些方法就不能给个demo，显示具体使用方式？这让小白们情何以堪 传统的两种方式 import() 符合ECMAScript提议的import()语法，该提案与普通 import 语句或 require 函数的类似，但返回一个 Promise 对象。这意味着模块时异步加载的 webpack v2+ 使用...
React路由懒加载的实现
一个前端工程师
12-31 6035
React路由懒加载的实现
react路由懒加载lazyLoad
wanghe1111_的博客
05-05 3975
懒加载是指在项目中浏览器第一次加载项目时，如果不使用懒加载技术，则第一次浏览器加载项目时进行读取并下载所有路由组件资源，所以当组件很多时，就会造成浏览器卡死状态；如果使用了懒加载技术，那么每当跳转一个路由，才会吧此路由对应的组件进行下载读取资源并渲染，所以渲染性能就比较好。
React第三章(tsx语法入门 )
qq1195566313的博客
09-06 606
答: 基本没有没有区别只是在jsx语法上增加了类型。
React 事件系统解析
最新发布
why404
09-09 460
为什么 React 需要自己实现事件系统
react&webpack老项目开发环境增加vite
m0_59070120的博客
09-09 652
/ 对应webpack的loader，转译的时候将process.env转化为import.meta.env。console.error(`${htmlPath}路径没有html`);console.log(`${outPath}成功创建外层html`);// exists弃用，existsSync不使用回调。//支持前缀REACT_APP_// 路径相关配置项。// 存在的话就返回。
React-CSS
yang295242361的博客
09-06 1388
React并没有像Vue那样提供特定的区域给我们编写CSS代码 所以你会发现在React代码中, CSS样式的写法千奇百怪
React 组件间共享数据
HHX_01的博客
09-09 1663
在 React 中，组件间的数据共享和状态管理是开发中的重要任务。通过状态提升，我们可以确保多个组件共享同一份状态，从而使它们的一致性得以保持。当应用变得更加复杂时，可以使用 React Context API 或第三方库来处理状态管理。掌握这些概念和工具，可以帮助你更好地管理应用的状态和数据流，提高代码的可维护性和扩展性。希望这篇文章能帮助你更好地理解 React 中的组件间共享数据。如果你有任何问题或建议，请在评论区留言。
webpack打包优化实践：按需加载与配置调整
"本文主要介绍了如何对webpack进行优化，包括按需加载、优化loader配置以及优化文件路径等方法，旨在减小打包后的文件大小，提高首页加载速度，并优化打包过程。" 在现代Web开发中，随着项目的复杂度增加，webpack...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值