改进生产管理员在 Rest/React 应用程序上的首次加载
Improving first time load of a Production Admin on Rest/React App
我正在使用 Admin-on-rest 并将生产应用程序部署到 AWS S3。
我在 Admin-on-rest 的说明中使用 create-react-app 创建了 Admin-on-rest 应用程序。
构建应用程序：我运行这个脚本：npm run build
文件 main.js 的大小太大 (5 MB)。第一次加载，需要 5 分钟以上。 (我的网速测试是3MB/s)
有什么方法可以减小 main.js 文件的大小吗？
我正在阅读有关 JS 卡盘的内容，但它并不容易应用于 Admin-on-rest
要事第一。 AOR 本身对应用程序大小没有太大影响，优化应用程序是一项非常不同的任务。
以下是我在将生产中的应用程序从 2.8 MB 左右优化到 400 KB 服务文件大小时采取的步骤。
1) 第一步是了解代码的哪一部分导致了膨胀。您可以使用 Source Map Explorer 轻松完成此操作。
https://www.npmjs.com/package/source-map-explorer
2) 在确定 packages/modules 之后，您应该探索减少代码大小的方法。例如
不要做
import _ from 'lodash'
做
import find from 'lodash/find'
减少不必要的进口很容易实现
3) 检查是否有较小版本的库可供您插入。
例如moment.js现在有跟踪主包的moment-mini，里面没有所有的国际化数据。这为我节省了大约 400 KB 的包大小。
4) GZIP GZIP GZIP。对我的文件大小影响最大。
我正在使用 Nginx 来提供我的静态文件，我可以简单地向它添加一个配置以在传输过程中对包进行 gzip。工作超级顺利。
如果您使用的是 Apache 之类的软件，那么您也可能想出一种方法来执行此操作。
另一种选择是从 Create React App 中弹出，然后配置 webpack 以在构建时生成 gzip 文件。理论上这应该会产生更小的包，因为您可以在压缩期间使用 Tree Shaking。这是我 2 个月前的经历，Create React App 可能已经通过某种方式通知 webpack 对 bundle 进行 gzip 压缩。也一定要探索那条大道。
这将我的包大小从 1.6 mb 减少到约 400 kb 的服务文件。
5) 最后，你可以退出 React 本身并使用 Preact，这是市场上最热门的减少包大小的方法。我没用过这个。但是您可以尝试记录您的发现，以造福于我们所有人。
6) 如果您需要生产应用程序变得更小，那么您将不得不考虑更高级的策略，例如使用服务器端渲染加载 dashboard/landing 页面，而应用程序包的其余部分异步加载时仪表板被加载。
祝你好运。
编辑于 - 26/02/2018
刚发现这个 --> https://github.com/jamiebuilds/react-loadable
这里有更多详细信息。这不使用 react-loadable，而是教您如何使用代码拆分，Create-React-App 引导页面支持代码拆分。
我正在使用 Admin-on-rest 并将生产应用程序部署到 AWS S3。
我在 Admin-on-rest 的说明中使用 create-react-app 创建了 Admin-on-rest 应用程序。
构建应用程序：我运行这个脚本：npm run build
文件 main.js 的大小太大 (5 MB)。第一次加载，需要 5 分钟以上。 (我的网速测试是3MB/s)
有什么方法可以减小 main.js 文件的大小吗？
我正在阅读有关 JS 卡盘的内容，但它并不容易应用于 Admin-on-rest
要事第一。 AOR 本身对应用程序大小没有太大影响，优化应用程序是一项非常不同的任务。
以下是我在将生产中的应用程序从 2.8 MB 左右优化到 400 KB 服务文件大小时采取的步骤。
1) 第一步是了解代码的哪一部分导致了膨胀。您可以使用 Source Map Explorer 轻松完成此操作。
https://www.npmjs.com/package/source-map-explorer
2) 在确定 packages/modules 之后，您应该探索减少代码大小的方法。例如 不要做
import _ from 'lodash'
做
import find from 'lodash/find'
减少不必要的进口很容易实现
3) 检查是否有较小版本的库可供您插入。
例如moment.js现在有跟踪主包的moment-mini，里面没有所有的国际化数据。这为我节省了大约 400 KB 的包大小。
4) GZIP GZIP GZIP。对我的文件大小影响最大。
我正在使用 Nginx 来提供我的静态文件，我可以简单地向它添加一个配置以在传输过程中对包进行 gzip。工作超级顺利。
如果您使用的是 Apache 之类的软件，那么您也可能想出一种方法来执行此操作。
另一种选择是从 Create React App 中弹出，然后配置 webpack 以在构建时生成 gzip 文件。理论上这应该会产生更小的包，因为您可以在压缩期间使用 Tree Shaking。这是我 2 个月前的经历，Create React App 可能已经通过某种方式通知 webpack 对 bundle 进行 gzip 压缩。也一定要探索那条大道。
这将我的包大小从 1.6 mb 减少到约 400 kb 的服务文件。
5) 最后，你可以退出 React 本身并使用 Preact，这是市场上最热门的减少包大小的方法。我没用过这个。但是您可以尝试记录您的发现，以造福于我们所有人。
6) 如果您需要生产应用程序变得更小，那么您将不得不考虑更高级的策略，例如使用服务器端渲染加载 dashboard/landing 页面，而应用程序包的其余部分异步加载时仪表板被加载。
祝你好运。
编辑于 - 26/02/2018 刚发现这个 --> https://github.com/jamiebuilds/react-loadable
这里有更多详细信息。这不使用 react-loadable，而是教您如何使用代码拆分，Create-React-App 引导页面支持代码拆分。