如何减少生产中的 reactjs 文件大小？答案

【问题标题】：How can I reduce reactjs file size in production?如何减少生产中的 reactjs 文件大小？
【发布时间】：2018-05-05 17:03:38
【问题描述】：

我构建了一个简单的 react 应用，使用 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。

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

【问题讨论】：

如果你使用的是vscode，你可以使用这个扩展来查看导入的成本：marketplace.visualstudio.com/… 例如你只能从react-dom导入render。另外，npm run build 在您的 package.json 中代表什么，您将什么用作捆绑器？它的生产配置是什么？
注意源映射文件不会被您的用户下载，除非他们打开 DevTools。所以计算它们是没有意义的。您也可以删除它们。

标签： reactjs

【解决方案1】：

official source 声明 v16.0 是 109 KB。
axios.min.js 是 13 KB，所以如果您使用的是 v16.3，137 KB 听起来是正确的。

我们应该查看gzip 的大小，因为这就是您的客户将得到的服务。
以下是与其他流行框架的比较：

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

如果您仍然担心大小，可以尝试preact，它仅与4 KB 差不多，并且具有与 React 几乎相同的 API（剥离了一些功能）。

【讨论】：