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

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：

捆绑包大小明显大于推荐的大小。

您可以检查源映射。

我想减少 bundle size，根据我所做的研究，它得出结论：

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

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

• 代码拆分。
• 将库移至 devDependencies

我有一些关于：

1. 为什么小包大小很重要？
2. 推荐的捆绑包大小是多少，为什么？
3. 我知道代码拆分将您的代码拆分为各种包，然后可以按需或并行加载。它如何帮助减少捆绑包的大小？
4. 我如何决定图书馆是否需要成为其中的一部分 devDependencies
5. 还有其他方法吗？

Answer 1

为什么小包大小很重要？

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

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

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

我知道代码拆分将您的代码拆分为各种包，然后可以按需或并行加载。它如何帮助减少捆绑包的大小？

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

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

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

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

还有其他方法吗？

主要你应该专注于摇树和代码拆分/延迟加载。

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

对于antd库，确保您的所有导入都是可摇树的（例如：在您的示例中导入单个组件）可能会显着减少导入代码的大小（其他库如 lodash 可能是类似的故事，但如果您有依赖项没有使用 tree-shakable 导入，无论如何都将包含在内）

对于vis并monaco-editor考虑它们是否可以按需加载，而不是总是在启动时加载。试想，如果你需要codemirror，以及monaco-editor-从一眼，他们似乎充满类似的目的。

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