我是新人,正在尝试 Angular2。我发现 dist 文件夹中的文件非常大,其中有一个由 Angular cli 创建的空项目
这是我采取的步骤
- ng 新的我的项目
- cd我的项目
- 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?
- -更新 - -
我跑完之后
ng build -e=prod --prod --no-sourcemap --aot
大小减少到大约 500kb。效果好 50%。然而,这篇文章Angular 2:减小应用程序大小提到文件大小已降至
要减小构建的尺寸,您首先应该只查看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(使用前将#替换为@)