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

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 的警告：

The bundle size is significantly larger than recommended.

You can inspect the source map.

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

寻找大型图书馆的替代品。
- 根据我的需要制作一个 "slim" 版本的库。
按需导入单个组件：

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

Code-splitting.
将库移动到 devDependencies

我有一些问题：

为什么小包很重要？
建议的捆绑包大小是多少，为什么？
我了解代码拆分会将您的代码拆分为多个包，然后可以按需或并行加载这些包。它如何帮助减少包大小？
我如何决定图书馆是否需要成为 devDependencies
还有其他方法吗？

Answer 1

Why is it important to have a small bundle size?

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

What is the recommended bundle size, why?

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

I understand that code-splitting splits your code into various bundles which can then be loaded on-demand or in parallel. How does it help in reducing the bundle size?

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

How do I decide if a library needs to be a part of devDependencies

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

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

Are there any other approaches?

首先你应该关注 tree shaking 和代码 splitting/lazy 加载。

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

对于 antd 库，确保所有导入都是可摇树优化的（例如：在您的示例中导入单个组件）可能会显着减少导入代码的大小（其他库如 lodash 可能是一个类似的故事，但如果你有没有使用 tree-shakable imports 的依赖项，那么整个事情都会被包括在内）

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

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

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

Reducing bundle size of a production application

javascript

npm

webpack-production

我有一些问题：