在Rest/React上改进生产管理的第一次负载

Question

我正在使用Admin-on-rest并将生产应用程序部署到AWS S3。

我在Admin-on-rest的说明中用create-react-app创建了Admin-on-rest应用程序。

要构建应用程序:我运行以下脚本：npm run build

文件main.js的大小太大(5MB)。第一次加载，需要超过5分钟。(我的网速测试是3MB/s)

有没有办法缩小main.js文件的大小？

我正在阅读关于JS放弃的文章，但要应用于Admin-on-rest并不容易

Answer 1

首先要做的是。AOR本身对应用程序的大小影响不大，而优化应用程序则是一项完全不同的任务。

下面是我在优化我的生产应用程序时采取的步骤，从2.8 MB的ish到400 KB的服务文件大小。

1)第一步是知道代码的哪一部分会导致臃肿。使用可以很容易地做到这一点。

https://www.npmjs.com/package/source-map-explorer

2)在识别包/模块之后，您应该探索如何减少代码中的包/模块的大小。不要这样做

import _ from 'lodash'

做

import find from 'lodash/find'

减少不必要的进口是低挂易果

3)检查是否有可以插入的较小版本的库。

例如，moment.js现在有了追踪主包的矩-迷你，而且里面没有所有的国际化数据。它为我削减了大约400 KB的包裹大小。

( 4) GZIP对我档案大小的最大影响。

我使用Nginx来提供我的静态文件，我可以简单地向它添加一个配置，以便在传输过程中对包进行gzip。工作非常顺利。

如果您正在使用类似Apache的东西，那么您也可能会想出一种方法来做到这一点。

另一种选择是从中弹出，然后配置webpack在构建时生成gzipped文件。从理论上讲，这应该会导致更小的包，因为您可以在压缩期间使用Tree抖动。这是我两个月前的经验，可能已经做了一些方法来通知webpack将这个包打包。也要探索那条路。

将我的包大小从1.6mb减少到一个大约400 kb的服务文件.。

5)最后，您可以退出反应，并使用Preact，这是市场上的热点方式，以减少捆绑规模。我没用过这个。但为了我们大家的利益，你可以尝试记录你的发现。

6)如果在生产应用程序中需要更小的应用程序，那么您必须考虑更高级的策略，例如在加载仪表板时加载仪表板/登陆页面，并在加载仪表板时加载其馀的应用程序包异步。

祝你好运。

编辑on - 26/02/2018刚刚发现了这个-> https://github.com/jamiebuilds/react-loadable

这里有更多细节。这不使用React可加载，而是教您如何使用代码拆分，这是由Create引导页面从块中支持的。

https://scotch.io/tutorials/lazy-loading-routes-in-react