如何减小 vendor.js 为 2MB 而 app.js 为 720KB 的 Angular JS 应用程序的大小？答案

【问题标题】：How to reduce size for Angular JS app where vendor.js is 2MB and app.js is 720KB?如何减小 vendor.js 为 2MB 而 app.js 为 720KB 的 Angular JS 应用程序的大小？
【发布时间】：2016-09-15 16:47:11
【问题描述】：

我正在开发一个 AngularJS 网络应用程序。我使用 uglify 和 minify 创建 vendor.js 和 app.js 文件，但它们非常大——分别为 2 MB 和 720KB。正如我在 Chrome 开发工具中看到的那样，它们分别花了 25 秒和 14 秒来下载，我认为在我的 100MBPS 互联网连接上花费了很多时间。我担心速度可能远低于此速度的客户体验。有什么方法可以压缩或减小这些文件的大小？我相信 vendor.js 不能被分解，因为 Angular 在首页上需要所有这些。

【问题讨论】：

查看您正在使用的模块以了解大量模块的来源，可能有些模块的工作量超出了您的需要，您可以将其删除。

标签： javascript angularjs web-applications minify uglifyjs

【解决方案1】：

最大和最快的胜利将是使用 gzip 压缩和 CDN（cloudfront、akamai 等）提供文件。 CDN 通常会从物理上更靠近用户的位置提供文件（下载速度更快）。大多数 CDN 都可以轻松启用 gzip，这可能是您在文件大小方面获得最大优势的地方。

之后你可以看看 tree-shaking。如果你还没有使用像 webpack 这样的东西来捆绑你的 javascript，这可能需要大量的重构。但是 tree-shaking 的好处是它会从你的 app.js 和 vendor.js 文件中排除任何你没有使用的代码。

最后你可以看看延迟加载。通过这种方式，您可以使用所需的最少代码量引导您的应用程序，并且当用户导航到应用程序的不同部分时，他们会下载他们需要的内容。如果您使用的是 1.x，则 ocLazyLoad 往往是受欢迎的选择：https://oclazyload.readme.io/

【讨论】：

OP 已经声明他们使用了 uglify，这意味着或多或少地应用了 tree-shaking。 UglifyJs 的默认压缩设置将丢弃无效和未使用的代码：lisperator.net/uglifyjs/compress