首页 > 解决方案 > 如何减少生产中的 reactjs 文件大小?

问题描述

我构建了一个简单的反应应用程序,使用 axios 从 REST API 获取数据。

只导入了三个包

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

然而,当我运行“npm run build”来创建我的生产包时,我惊讶地看到一个大小为 137 kb 的 main.xxxx.js 文件和一个大小为 606 kb 的附加 main.xxx.js.map。

为什么这些文件这么大?有没有办法减少文件大小?

标签: reactjs

解决方案


官方消息称 v16.0是109 KB.
axios.min.js是,如果您使用的是 v16.3 13 KB,那么听起来是正确的。137 KB

我们应该使用查看大小,因为这就是您的客户将得到的服务。
这是与其他流行框架的比较:

Name          | Size (gzipped)
------------- | -------------
Angular 2     | 111 KB
React 16.2    | 32 KB
Vue 2.5       | 21 KB

如果你仍然关心大小,你可以试试preact,它只是4 KB和 React 几乎相同的 API(剥离了一些特性)。


推荐阅读