9

我有一个生产应用程序，其捆绑包大小为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：

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

我的源地图

您可以检查源映射。

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

  • 寻找大型图书馆的替代品。
    • 为我的需要制作一个“精简”版本的库。
  • 按需导入单个组件：
import Button from 'antd/es/button'; 
import { Button } from 'antd'; // Imports all library

我有一些问题：

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

1 回答 1

9

为什么小包很重要？

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

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

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

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

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

如何确定库是否需要成为 devDependencies 的一部分

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

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

还有其他方法吗？

首先，您应该专注于摇树和代码拆分/延迟加载。

例如，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/

于 2019-08-18T12:58:31.327 回答