减少生产应用程序的包大小

Question

我有一个生产应用程序，其包大小为 8.06MB。

# Console log from npm build
File sizes after gzip:

  1.67 MB    build/static/js/3.73cf59a2.chunk.js
  794.29 KB  build/typescript.worker.js
  131.13 KB  build/css.worker.js
  104.68 KB  build/html.worker.js
  104.02 KB  build/static/css/3.01bcafd3.chunk.css
  67.03 KB   build/static/js/main.6acf560d.chunk.js
  49.64 KB   build/json.worker.js
  25.12 KB   build/editor.worker.js
  7.99 KB    build/static/js/54.afc981d1.chunk.js
  ...

关于构建应用程序并运行source-map-explorer

npm run build
source-map-explorer 'build/static/js/*.js'

我收到来自build 的警告：

捆绑包的大小明显大于建议的大小。

你可以inspect the source map。

我想减少捆绑包的大小，根据我所做的研究，它得出的结论是：

• 寻找大型图书馆的替代品。
  • 根据我的需要制作一个“精简”版本的库。
• 按需导入单个组件：

import Button from 'antd/es/button'; 
import { Button } from 'antd'; // Imports all library

• Code-splitting.
• 将库移动到devDependencies

我有一些问题：

1. 为什么小包很重要？
2. 推荐的捆绑包大小是多少，为什么？
3. 我了解代码拆分会将您的代码拆分为多个包，然后可以按需或并行加载这些包。它对减小捆绑包大小有何帮助？
4. 如何确定库是否需要成为devDependencies 的一部分
5. 还有其他方法吗？

Answer 1

为什么小包很重要？

因为这将通过减少用户必须传输的数据量来减少用户加载您的应用程序/网站所需的时间。这对于低带宽连接的用户尤其重要，包括不完整的蜂窝连接。

推荐的捆绑包大小是多少，为什么？

尽可能小。我不认为这里真的可以给出准确的答案，因为每个应用程序都是不同的，但通常你希望“关键”路径上的资源尽可能小，这样你就可以减少初始加载时间，然后根据需要即时加载更多资源。

我了解代码拆分会将您的代码拆分为多个包，然后可以按需或并行加载这些包。它对减小包大小有何帮助？

虽然它可能不会减少您的整体捆绑包大小，但可以减少单个用户所需的数据量。例如，如果您只在应用程序的特定部分使用monaco-editor，则仅在用户激活该功能时才延迟加载它可能是有意义的。

我如何决定一个库是否需要成为 devDependencies 的一部分

devDependencies 应包括仅在开发项目时才需要的任何依赖项。这将包括工具（例如：webpack、eslint、gulp）和测试框架（mocha、chai、sinon）。

然而，这与服务器端项目更相关，因为真正的 devDependencies 不应最终出现在您的捆绑代码中，即使您错误地将它们放在依赖项部分。

还有其他方法吗？

您应该主要关注 tree-shaking 和代码拆分/延迟加载。

例如，moment-timezone 本身占用了将近 1mb - 你真的需要这个吗？对于许多应用程序来说，只需在浏览器时区和 UTC 中工作就足够了，这不需要moment-timezone

对于antd 库，确保所有导入都是可摇树的（例如：导入示例中的单个组件）可能会显着减少导入代码的大小（其他库如 lodash 可能是类似的故事，虽然如果你有没有使用可摇树导入的依赖项，那么无论如何都会包含整个东西）

对于vis 和monaco-editor，考虑它们是否可以按需加载，而不是总是在启动时加载。考虑一下您是否需要 codemirror 和 monaco-editor - 乍一看，它们似乎满足了类似的目的。

参考： https://webpack.js.org/guides/tree-shaking/
https://webpack.js.org/guides/lazy-loading/