javascript - 减少生产应用程序的捆绑包大小

我得到了一个生产应用程序，其捆绑包大小为 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收到警告:







我想减小捆绑包大小，从我所做的研究中得出的结论是:

寻找大型图书馆的替代品。

为我的需要制作一个“ slim ”的库。

导入按需的单个组件:

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

Code-splitting.

将库移至devDependencies

我对以下问题有疑问:

为什么小捆束很重要？

建议的捆绑包大小是多少，为什么？

我知道代码拆分会将您的代码分成多个捆绑包，然后可以按需或并行加载这些捆绑包。它如何帮助减小捆绑包的尺寸？

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

还有其他方法吗？

最佳答案

因为这样可以减少用户必须传输的数据量，从而减少了用户加载应用程序/站点所需的时间。对于使用低带宽连接(包括修补的蜂窝连接)的用户而言，这一点尤其重要。



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



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



devDependencies应该包括开发项目时仅需要的任何依赖项。这将包括工具(例如:webpack，eslint，gulp)和测试框架(mocha，chai，sinon)。

但是，这与服务器端项目更相关，因为即使将devDEVDependencies错误地放在了dependencies部分中，它也不会最终出现在捆绑的代码中。



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

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

关于javascript - 减少生产应用程序的捆绑包大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57542777/