如何减少react原生项目的大小
减少React原生项目的大小是一个常见的优化需求，可以通过以下几种方法来实现：
- 使用代码分割（Code Splitting）：React支持使用动态导入（Dynamic Import）来实现代码分割，将应用程序拆分为多个较小的代码块，按需加载。这样可以减少初始加载的文件大小，提高应用程序的加载速度。可以使用React.lazy和Suspense来实现动态导入。
- 使用Tree Shaking：Tree Shaking是一种通过静态分析的方式，去除未使用的代码的技术。在React项目中，可以使用Webpack等构建工具的Tree Shaking功能来去除未使用的React组件和库，从而减少打包后的文件大小。
- 压缩代码：使用压缩工具（如UglifyJS、Terser等）对打包后的代码进行压缩，去除空格、注释和无用代码，减小文件大小。
- 使用生产模式构建：在构建React项目时，使用生产模式进行构建，这样会自动应用一些优化措施，如启用代码压缩、移除开发模式下的警告信息等，从而减小构建后的文件大小。
- 按需加载第三方库：如果项目中使用了一些第三方库，可以考虑按需加载这些库，而不是将整个库打包到应用程序中。例如，可以使用React.lazy和Suspense来按需加载React Router、Ant Design等库。
- 使用Webpack Bundle Analyzer：使用Webpack Bundle Analyzer工具可以分析打包后的文件，查看每个模块的大小，找出文件大小较大的模块，并进行优化。
- 使用Gzip压缩：在服务器端启用Gzip压缩，可以减小传输过程中的文件大小，提高加载速度。
总结起来，减少React原生项目的大小可以通过代码分割、Tree Shaking、压缩代码、使用生产模式构建、按需加载第三方库、使用Webpack Bundle Analyzer和使用Gzip压缩等方法来实现。这些优化措施可以提高应用程序的加载速度和性能。腾讯云提供了丰富的云计算产品和解决方案，可根据具体需求选择适合的产品。
相关·内容
我正在使用React.lazy在运行时加载一些React类，这样它们就不会一次全部加载。我的代码适用于生产，但当我处于开发模式时会崩溃。(更新:我的代码不再在生产中工作-见下文).
特定的错误信息非常神秘，所以很难确切知道问题是什么：
Uncaught TypeError: Cannot read property 'call' of undefined at __webpack_require__ (main.js:64)
The above error occurred in one of your React components:
in Unknown
浏览 2提问于2019-09-24得票数 23
2回答
我目前正在使用React 16与悬念和延迟代码分割我的代码库。虽然我想预加载组件。
在下面的例子中，我得到了两条路线。是否有一种方法可以在Demo挂载后立即预加载Prime？我尝试在componentDidMount of Prime页面中创建另一个动态导入，但是React.lazy似乎没有得到与下面的动态导入相同的文件。
import React, { lazy, Suspense } from 'react';
import { Switch, Route, withRouter } from 'react-router-dom';
import Globa
浏览 1提问于2018-11-11得票数 13
回答已采纳
我使用react和悬念来加载组件，但是如果我尝试使用npm 构建应用程序，我会发现一个错误：错误: Uncaught : Minified #294;，而且如果我评论延迟加载，构建就会成功。代码：
import { Suspense, lazy } from 'react';
const Component= lazy(() => import('./../location'));
const Homepage=()=>{
return (
<>
<Suspense fallback={<div>
浏览 5提问于2019-09-19得票数 4
回答已采纳
因此，我将类组件中使用的导入转换为React.lazy导入api，并将其包装在一个挂起标记中。当我测试这个类组件时，enzyme抛出了一个错误"Enzyme Internal Error: unknown node with tag 13"。是否有一种方法可以渲染和测试延迟加载组件的挂载，而不是使用浅层渲染？
我已经尝试过异步等待，直到延迟加载的承诺得到解决，但也不起作用，如下所示：
it('async await mount', () async () => {
const wrapper = await mount(<Component /&
浏览 13提问于2018-12-14得票数 17
如何减少vendor.bundle.js和main.bundle.js文件大小，同时使用
ng build --aot false -prod
如果我使用延迟加载模块，我的角度应用程序main.bundle.js文件大小在构建时会减少。
浏览 0提问于2018-08-21得票数 0
回答已采纳
我在react 18.2.0中迁移了我的代码。我在用
使用悬念和惰性拆分代码。单页应用程序
分割块加载透明，快乐流正在工作。下面是代码
let LoginPageM = React.lazy(() => import('./LoginPageM' /* webpackChunkName: 'LoginPageM' */));
const Index = ({ isSSR, ...props }) => {
return (
<React.Suspense fallback={<LoaderUI />}>
浏览 13提问于2022-06-17得票数 1
我正在研究<Suspense>和React.lazy()的概念，我想更好地理解发生了什么，以便在现有的应用程序中添加一些逻辑。
让我们从定义开始：
React.lazy函数允许将呈现为常规组件的动态导入。
(由我突出显示的呈现)
和
如果包含OtherComponent的模块在MyComponent呈现时尚未加载，则在等待加载时必须显示一些后备内容.
(我突出显示了加载的)
现在，Suspense定义使用术语load，lazy()使用render。
让我们在这个概念中添加一些代码。
const ComponentOne = React.lazy(() => i
浏览 0提问于2019-06-06得票数 2
回答已采纳
我想优化被服务的javascript页面。我使用的是webpack 4，配置如下。我用的是webpack -p --mode=production的webpack。当我在生产模式下运行时，我仍然得到大于1mb的文件。为了提高性能，我想尽可能地减小文件大小。
module.exports = {
entry : {
app: [...
],
vendor: ['react','moment','lodash/core']
},
output : {
filena
浏览 0提问于2019-10-25得票数 0
1回答
如何缩小webpack的包装尺寸
、、、、
这是我的webpack.dev.config.js
"use strict";
let webpack = require('webpack');
let path = require('path');
// let HtmlWebpackPlugin = require('html-webpack-plugin');
// let ExtractTextPlugin = require("extract-text-webpack-plugin");
const WebpackBrowserPlugin = req
浏览 2提问于2017-04-13得票数 0
我想通过应用树摇动的概念来提高我的angular应用程序的性能，你能建议一下如何实现吗？
现在，我尝试使用下面的引用链接来实现树摇动
https://blog.rangle.io/optimize-your-angular2-application-with-tree-shaking/
上面的引用包括webpack.config.js中的一些修改，但我在应用程序中看不到该文件
npm install --save-dev webpack
已使用上述工具安装了webpack，但仍无法找到webpack.config.js文件
浏览 1提问于2019-01-29得票数 3
我使用create (react-scripts 4.0.3)/Ionic React来构建一个移动应用程序。
我对树的晃动有困难，哪个
我正在使用来分析我的包大小。我要用React.lazy()和Suspense来分割这个包。
但是，我注意到一个问题，在这个问题中，一个完整的文件正在被导入，而不仅仅是一个函数。
我正在使用，我有一个函数列表，queries.tsx
import { addDataReferences } from '../utils/dataRefs';
export function useLoginStatusCookie(): UseQueryRes
浏览 6提问于2021-08-09得票数 1
回答已采纳
我正在使用create-react-app工具链开始。一切都很好，但它的构建规模有点过大。在我的应用程序中，有8个组件和2个小上下文，总大小为60kb。所以我的src文件夹中的所有代码都是60kb。但是使用npm run build，它生成了900KB的应用程序块。 然后我在youtube上看到了一段视频，视频中这个家伙使用了webpack的配置将他的700kb的数据块减少到了100kb。他没有太多解释他的webpack配置。不过，他所说的是，react脚本构建包括许多生产中不需要的调试工具。这个命令特别起到了神奇的作用 new webpack.DefinePlugin({
浏览 17提问于2021-03-23得票数 1
我们已经有了我们的电子商务平台已经在生产，我们正在体验怪异的ChunkLoadError。此错误是随机发生的，是不可复制的。当我们试图打开失败的文件，它在那里，可以加载正常。
如果用户得到这个错误，他的白屏幕(逻辑)，但刷新后，一切都好。
我们运行SSR电子商务的反应(最新)，快车(最新)
我们的webpack /炮口配置
const path = require('path');
const autoprefixer = require('autoprefixer');
const MiniCssExtractPlugin = require('min
浏览 15提问于2020-03-15得票数 9
1回答
我有一个正在运行的react应用程序，我想在其中添加使用React.lazy的基于路由的代码分割。
目前我的代码是，
import { PureComponent, cloneElement, Suspense, lazy } from 'react';
...
export const CartPage = lazy(() => import(/* webpackMode: "lazy", webpackPrefetch: true */ 'Route/CartPage'));
...
<Suspense fallback={ th
浏览 6提问于2020-05-30得票数 7
回答已采纳
下面是我的设置：
const DesktopApp = lazy(() => import(/* webpackChunkName: "DesktopApp" */'./DesktopApp'));
const MobileApp = lazy(() => import(/* webpackChunkName: "MobileApp" */'./MobileApp'));
type Props = { shouldServeMobile: boolean };
export const App = ({ shoul
浏览 11提问于2019-11-06得票数 6
1回答
我正在尝试做一个桌面应用程序使用电子和反应。但是当我使用React.lazy()时，它不能在生产模式下运行，当我打包应用程序时，它只显示一个空屏幕(在开发模式下，它总是工作得很好)
以下是一个错误：
元素类型无效。接收到的承诺解析为：函数(){返回l.a.createElement("div"，null，l.a.createElement("h1"，null，“简单组件”))}。延迟元素类型必须解析为类或函数.
我读了很多文章，但还是没能成功。我试过不同的webpack配置，电子包装机，电子建设者，bozon -但是没有什么能帮助它与懒惰一起工作。
我仍
浏览 2提问于2020-06-06得票数 2
回答已采纳
问题：
本质上遇到以下问题(但使用不同的文件)：
已经试过了所有的建议。
下面是在dev模式下页面加载的样子：
有人会对如何优化这个问题提出建议吗？
代码：
next.config.js:
const withPlugins = require('next-compose-plugins');
const webpack = require("webpack")
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.
浏览 23提问于2021-07-22得票数 7
3回答
我正在使用webpack来捆绑我的react项目。我的项目依赖于以下组件的material-ui：
material-ui/Dialog
material-ui/styles/getMuiTheme
material-ui/styles/MuiThemeProvider
material-ui/FlatButton
material-ui/TextField
webpack-bundle- size -analyzer报告material-ui大小为1.07MB。下面是我的webpack配置文件：
const webpack = require('webpack');
cons
浏览 3提问于2016-08-19得票数 8
试图创建一个具有新依赖项的项目，但我仍然遇到了构建问题。
package.json：
{
"name": "my-files",
"version": "1.0.0",
"description": "App",
"main": "main.js",
"scripts": {
"format": "prettier --write ./src/**/*",
"serve"
浏览 0提问于2021-08-04得票数 0
2回答
我在我的项目中使用了React和Webpack。我的项目非常非常庞大。它由10-12个模块组成，捆绑一个模块相关的JS文件，文件大小为460KB。我担心在我为我的项目中的所有模块编写代码后，它可能需要高达5MB的包大小。我如何减少捆绑包的大小或任何建议，以捆绑大型可伸缩项目与React和Webpack。
提前感谢！
浏览 1提问于2018-09-16得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
