减少 Angular 2 文件大小以进行部署

2023-11-23

我是新人,正在尝试 Angular2。我发现 dist 文件夹中的文件非常大,其中有一个由 Angular cli 创建的空项目

这是我采取的步骤

  1. ng 新的我的项目
  2. cd我的项目
  3. ng 构建 --prod

And all the files inside my dist folder are 1.1mb!! I believe they are all the files required for deployment. What are the best way to drop this as much as possible? dist folder

- -更新 - - 我跑完之后 ng build -e=prod --prod --no-sourcemap --aot

大小减少到大约 500kb。效果好 50%。然而,这篇文章Angular 2:减小应用程序大小提到文件大小已降至

After


要减小构建的尺寸,您首先应该只查看gzip文件。如果你的网络服务器设置得当,这些是它唯一能提供服务的文件。你甚至可以 gzip 你的index.html并提供服务。大多数网络服务器(例如 nginx)都具有加载静态 gzip 文件的功能。要启用此功能,请将其放入您的 nginx 配置中:

gzip on;
gzip_static on;

Apache 有一个类似的模块来加载静态 gzip 文件。

每个流行的网络服务器至少都可以选择提供动态 gzip 压缩文件。这意味着当从网络服务器请求文件时,它将在传输过程中被压缩。这大约是您在构建文件夹中看到的生成的 gzip 文件的大小。

为了进一步缩小应用程序的大小,我建议使用aot编译,它也会使用树摇动。要启用此功能,并确保您的应用程序使用生产环境进行构建,请使用以下命令进行构建:

ng build --prod

在我的构建中,我确实注意到,如果我自己使用 gzip 压缩文件7zip例如,将其设置为最高压缩,文件大小会进一步减小。但请注意,在客户端解压缩这些文件将比压缩程度较低的文件使用更多的 CPU,但对于最新的 CPU,可以安全地忽略这种差异。

编译后的供应商脚本中还有很多注释块(@license),您可以尝试通过另一轮缩小来运行js文件以摆脱这些注释块,并在上面再次添加其中一个vendor.js罢工>

update

您在另一个问题中提到应用程序大小已降至 js.gz文件,这是您编译/压缩的应用程序,而不是普通的 js 文件。您所指的 50kb 在他们的路线图上。据我记得他们设法将文件大小降低到 20kb,因为他们结合不同的归档方法(brotli)实现了自己的闭包编译器

Closure Compiler 是一个使 JavaScript 下载和运行速度更快的工具。它不是从源语言编译为机器代码,而是从 JavaScript 编译为更好的 JavaScript。它解析你的 JavaScript,分析它,删除死代码并重写和最小化剩下的代码。它还检查语法、变量引用和类型,并对常见的 JavaScript 陷阱发出警告。

这就是为什么他们将打包实现隐藏在angular-cli。更改为另一个构建和编译工具将更容易实现,而不会弄乱人们的应用程序。这将需要一段时间,或者即使他们要实施它。现在,我这么说100kb对于一个框架来说是一个相当不错的大小,它可以为您提供这么多:)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

减少 Angular 2 文件大小以进行部署 的相关文章

随机推荐

  • Beautiful Soup 根据部分属性值查找标签

    我试图根据部分属性值来识别 html 文档中的标签 例如 如果我有一个 Beautifulsoup 对象 import bs4 as BeautifulSoup r requests get http My Page soup Beauti
  • 如何找到两个地址之间的距离? (Java服务器端)

    我正在开发一个 社交 地理感知应用程序 价值数百万美元的问题是如何列出 我的位置 X 英里内 的一组项目 因为有数百万个应用程序可以做到这一点 我惊讶地发现只有 Google Maps API 具有免费的网络服务 更糟糕的是 只有在 Goo
  • CSS 固定容器内的 div

    如何将固定 div 包含在 div container 中 其中固定 div 仅固定在 div container 中 而不是页面的其余部分 这意味着如果我向下滚动页面 在容器 div 之外 固定 div 不会滚动 很难解释 看这个例子 h
  • 由于函数排序导致 JSLint“超出范围”错误?

    JSLint 似乎对函数排序很挑剔 这很好 function a use strict return 1 function b use strict a 虽然这给出了 a is out of scope错误信息 function b use
  • 如何在 Cortex-M3 (STM32) 上从 RAM 执行函数?

    我正在尝试从 Cortex M3 处理器 STM32 上的 RAM 执行函数 该函数会擦除并重写内部闪存 所以我肯定需要在 RAM 中 但我该怎么做呢 我尝试过的是 使用 memcpy 将函数复制到 RAM 中的字节数组 检查它是否正确对齐
  • UNIX 中的管道不应该是单向的吗?

    看一下下面的代码 include
  • 根据属性从 NSArray 创建 NSSet

    一个人如何创建一个NSSet基于属性的数组中的对象 例如对象数组 每个对象都有一个强引用type属性 并且数组中存在每种类型的多次出现 这怎么能变成一个NSSet持有每种类型的单个对象 NSSet distinctSet NSSet set
  • Windows 更新导致 MVC3 和 MVC4 停止工作

    我是唯一一个在 10 月 15 日安装了 Windows Update 8 1 并突然 MVC 由于此警告而停止工作的人吗 警告 1 无法解析此引用 无法找到程序集 System Web Mvc Version 4 0 0 0 Cultur
  • jQuery 访问输入隐藏值

    我怎样才能访问
  • Swift 1.2 无法使用相同的函数名称和不同的参数[重复]

    这个问题在这里已经有答案了 我有两个名称相同但参数不同的函数 第一个接受一个函数作为参数 该函数接受 2 个双精度数并返回 1 第二个接受一个函数作为参数 该函数接受 1 个 double 并返回 1 这在 Swift 1 1 中有效 在
  • Mysql SELECT 里面的 UPDATE

    UPDATE forms SET pos SELECT MIN pos 1 FROM forms WHERE id id 这不起作用 错误消息 You can t specify target table form for update i
  • RSpec 类变量测试

    我正在使用 RSpec 在 gem 中测试类级实例变量 和设置器 我需要测试以下内容 如果从未使用过 setter 则会提供正确的默认值 可以通过设置器成功更新变量 显然这里存在运行顺序问题 如果我使用设置器更改值 我就会忘记默认值是什么
  • 查看不同 Git 分支中的文件而不更改分支

    是否可以在 git 分支中打开文件而不检出该分支 如何 本质上我希望能够打开我的文件github 页面分支 而无需始终切换分支 我不想修改它 只是想查看它 这应该有效 git show branch file Where branch可以是
  • 声明后初始化数组

    为什么声明变量后不能使用数组初始值设定项 例如 int arr arr 1 2 3 4 But int arr 1 2 3 4 是正确的 有没有办法在声明变量后使用数组初始化 这就是你可以做的 int arr arr new int 1 2
  • 检查Javascript是否启用

    有没有办法检查浏览器是否启用或支持Javascript 如果不支持 我想将用户重定向到用户友好的错误页面 我正在使用 jQuery 和 PHP Zend 框架
  • 如何使用 JSP 提供文件服务?

    这听起来可能很愚蠢 但却是现实生活中的一个例子 我能够显示带有 虚拟 链接名称的 HTML 表 像这样的东西 Xyz description a href docId 123 document doc a Xyz description a
  • Web 应用程序的对象存储

    我目前正在开发一个网站 该网站应向用户提供大约 4000 万份文档和图像 我需要关于哪种方法最适合存储符合这些要求的内容的建议 系统应该具有高可用性 可扩展性和耐用性 文件必须永久存储 并且用户应该能够修改它们 由于客户端限制 Amazon
  • gradle-android-scala-plugin 给出“找不到匹配的构造函数”错误

    输入thisAndroid Studio 中的示例代码出现此错误 错误 17 0 找不到匹配的构造函数 org gradle api internal tasks DefaultScalaSourceSet java lang String
  • 在R中使用ggplot2和facet_wrap显示多个轴标签

    我有一个很好的facet wrap密度图 我用它创建的ggplot2 我希望每个面板都有 x 和 y 轴标签 而不是只在左侧有 y 轴标签 在底部有 x 轴标签 我现在拥有的看起来像这样 library ggplot2 myGroups l
  • 减少 Angular 2 文件大小以进行部署

    我是新人 正在尝试 Angular2 我发现 dist 文件夹中的文件非常大 其中有一个由 Angular cli 创建的空项目 这是我采取的步骤 ng 新的我的项目 cd我的项目 ng 构建 prod And all the files