Angular2 CLI巨大的供应商捆绑：如何提高产品尺寸？

我有一个简单的应用程序，通过angular-cli初始化。Angular2 CLI巨大的供应商捆绑：如何提高产品尺寸？

这显示一些相对于3条路线页面。我有3个组件。在这个页面中，我使用lodash和Angular2 Http模块来获取一些数据（使用Rxjs Observables，map和subscribe）。我用一个简单的ngFor显示这些元素。但是，尽管我的应用程序非常简单，但我得到了一个巨大的（在我看来）捆绑包和地图。我不讨论gzip版本，但是在gzip之前大小。这个问题只是一个普遍的建议问。

一些测试结果：

纳克建立

哈希：8efac7d6208adb8641c1时间：10129ms块{0} main.bundle.js， main.bundle.map（主）18.7 KB {3} [初始] [渲染]

块{1} styles.bundle.css，styles.bundle.map，styles.bundle.map （样式）155 KB {4} [初始] [渲染]

块{2} scripts.bundle.js，scripts.bundle.map（脚本）128 kB的 {4} [初始] [渲染]

块{3} vendor.bundle.js，vendor.bundle.map（供应商）3.96 MB [初始] [渲染]

块{4} inline.bundle.js，inline.bundle.map（内联）0字节 [条目] [渲染]

等待：10Mb的供应商束打包这样一个简单的应用程序？

纳克构建--prod

哈希：09a5f095e33b2980e7cc时间：23455ms块{0} main.6273b0f04a07a1c2ad6c.bundle.js， main.6273b0f04a07a1c2ad6c.bundle.map（主）18.3 KB {3- } [初始] [渲染]

块{1} styles.bfdaa4d8a4eb2d0cb019.bundle.css， styles.bfdaa4d8a4eb2d0cb019.bundle.map， styles.bfdaa4d8a4eb2d0cb019.bundle.map（样式）154 KB {4} [初始] [呈现]

块{2} scripts.c5b720a078e5464ec211.bundle.js， scripts.c5b720a078e5464ec211.bundle.map（脚本）128 kB的{4} [初始] [渲染]

块{3} vendor.07af2467307e17d85438 .bundle.js， vendor.07af2467307e17d85438.bundle.map（供应商）3.96 MB [初始] [渲染]

块{4} inline.a345391d459797f81820.bundle.js， inline.a345391d459797f81820.bundle.map（内联）0字节[条目] [呈现]

再次等待：这样一个类似的供应商捆绑大小prod？

ng build --prod --aot

哈希：517e4425ff872bbe3e5b时间：22856ms块{0} main.95eadabace554e3c2b43.bundle.js， main.95eadabace554e3c2b43.bundle.map（主）130 KB {3} [初始] [渲染]

块{1} styles.e53a388ae1dd2b7f5434.bundle.css， styles.e53a388ae1dd2b7f5434.bundle.map， styles.e53a388ae1dd2b7f5434.bundle.map（样式）154 KB {4} [初始] [渲染]

块{2} scripts.e5c2c90547f3168a7564.bundle.js， scripts.e5c2c90547f3168a7564.bundle.map（脚本）128 kB的{4} [初始] [渲染]

块{3} vendor.41a6c1f57136df286f14。 bundle.js， vendor.41a6c1f57136df286f14.bundle.map（供应商）2.75 MB [初始] [渲染]

块{4} inline.97c0403c57a46c6a7920.bundle.js， inline.97c0403c57a46c6a7920.bundle.map（内联）0字节[条目] [呈现]

ng build --aot

哈希：040cc91df4df5ffc3c3f时间：11011ms块{0} main.bundle.js， main.bundle.map（主）130 KB {3} [初始] [渲染]

块{ 1} styles.bundle.css，styles.bundle.map，styles.bundle.map （样式）155 KB {4} [初始] [渲染]

块{2} scripts.bundle.js，脚本。 bundle.map（scripts）128 kB {4} [initial] [rendered]

chunk {3} vendor.bundle.js，vendor.bundle.map（vendor）2.75 MB [initial] [rendered]

chunk {4} inline.bundle.js，inline.bundle.map（inline） 0字节 [进入] [渲染]

那么几对PROD部署我的应用程序的问题：

为什么厂商捆绑了如此巨大？
是否正确地使用angular-cli树？
如何提高这个包的大小？
需要.map文件吗？
包中是否包含测试功能？我不需要他们的产品。
通用问题：推荐工具包装什么？也许angular-cli（在后台使用webpack）不是最合适的吗？我能做更多吗？

我搜索了很多堆栈溢出的讨论，但我没有找到任何通用的问题。

来源

2017-01-02 BlackHoleGalaxy

要了解更多有关角2应用程序的优化，看看这个：https://github.com/mgechev/angular-performance-checklist#introduction – Timathon

但我不认为我们应该在乎这个，角色cli将会发展，事情会变得越来越好。如果你需要一些angular-cli没有的功能，只需在他们的repo中提交一个问题：https://github.com/angular/angular-cli – Timathon

而我认为@Timathon在某些方面是正确的，如果有人试图将Angular2部署到生产环境中，他们*应该关心软件包大小，因为这会直接影响应用程序的性能。角度性能检查表是查看可以改进的一个很好的资源。有角度的团队正在努力减少捆绑尺寸。兴奋地看到它去了哪里！ –

一些声称使用AOT编译可以将供应商捆绑包大小减少到250kb。然而，在BlackHoleGalaxy的例子中，他使用了AOT编译，并且仍然保留了一个2.75MB的供应商包，大小为ng build --prod --aot，比假设的250kb大10倍。即使您使用的是v4.0，这对于angular2应用程序来说也并不符合标准。对于那些真正关心性能的人来说，2.75MB仍然太大，特别是在移动设备上。

有几件事情可以做，以帮助您的应用程序的性能：采用了棱角分明的通用

1）AOT &树摇动（角CLI做到这一点的开箱）

2） AKA服务器端渲染（不是在CLI）

3）网络工作者（再次，而不是在命令行，而是一个非常要求的功能）
见：https://github.com/angular/angular-cli/issues/2305

4）服务工作者
见：https://github.com/angular/angular-cli/issues/4006

您可能不需要在单个应用程序中使用所有这些功能，但这些是当前优化Angular性能的一些选项。我相信/希望谷歌意识到性能方面的缺陷，并计划在未来改进这一点。

这里是谈更深入了解一些我上面提到的概念的引用：

https://medium.com/@areai51/the-4-stages-of-perf-tuning-for-your-angular2-app-922ce5c1b294

来源

2017-04-12 01:44:38

我最小的项目是384kB，请参阅https://github.com/JCornat/min-angular我相信有简单的方法来优化它，但它接近250kB！ –

@JacquesCornat看起来不错！但是你的应用只有一个组件。问题是如何管理软件包大小或更大的应用程序。通常AOT不会减少足够的尺寸，人们不得不考虑其他优化方式。我强烈建议大家检查一下webpack-bundle-analyzer。一个非常有用的/简单的方法，看看什么引起膨胀 –

不幸的是，公用事业，如'SW-precache'拒绝处理供应商捆绑大于2MB。 – 2017-07-05 02:51:46

首先，供应商捆绑包是巨大的，因为Angular 2依赖于很多库。最小尺寸为Angular 2 app is around 500KB（有些情况下为250KB，请参阅底部文章）。
树木摇晃由angular-cli正确使用。
做不是包括.map文件，因为只用于调试。而且，如果使用热更换模块，请将其取下以减轻供应商的负担。

收拾生产，我personnaly使用Webpack（和角CLI依赖于它太），因为你可以真正优化或调试configure everything。
如果您想使用Webpack，我同意第一视图有点棘手，但在网上看到教程，您不会感到失望。
否则，请使用angular-cli，这样可以很好地完成工作。

使用Ahead-of-time compilation是强制性的，以优化应用和收缩角2应用250KB。

这里是一个回购我创建（github.com/JCornat/min-angular）中测试的最小角大小束，并且我得到384KB。我相信有一种简单的方法来优化它。

谈到大的应用程序，使用AngularClass/angular-starter配置，同样在上述回购，我的包大小大的应用程序（150+组件）从8MB去（4MB没有地图文件）580KB 。

来源

2017-01-02 20:31:44

Lodash可以取决于你如何从它导入贡献的代码中的错误块到你的包。例如：

// includes the entire package (very large) 
import * as _ from 'lodash'; 

// depending on your buildchain, may still include the entire package 
import { flatten } from 'lodash'; 

// imports only the code needed for `flatten` 
import flatten from 'lodash-es/flatten'

就我个人而言，我仍然希望从我的实用功能中获得更小的足迹。例如。在最小化之后，flatten可以为您的包提供高达1.2K。所以我一直在建立一个简化的lodash函数集合。我的flatten的实施贡献大约50 bytes。你可以在这里查看它是否适用于你：https://github.com/simontonsoftware/micro-dash

来源

2017-09-09 19:03:59

我希望分享的一件事是导入库如何增加dist的大小。我已经导入了angular2-moment包，但是我可以使用从@ angular/common导出的标准DatePipe来完成我需要的所有日期时间格式。

随着Angular2矩"angular2-moment": "^1.6.0",

块{0} polyfills.036982dc15bb5fc67cb8.bundle.js（polyfills）191 KB {4} [初始] [渲染]块{1} main.e7496551a26816427b68。 bundle.js（main）2.2 MB {3} [initial] [呈现]块{2}个样式.056656ed596d26ba0192.bundle.css （样式）69字节{4} [initial] [rendered]块{3} 供应商.62c2cfe0ca794a5006d1.bundle.js（vendor）3.84 MB [initial] [rendered] chunk {4} inline.0b9c3de53405d705e757.bundle.js（inline） 0 by TES [条目] [渲染]

除去Angular2矩和使用DatePipe代替

块{0} polyfills.036982dc15bb5fc67cb8.bundle.js（polyfills）191 KB {4} [初始后] [渲染]块{1} main.f2b62721788695a4655c.bundle.js（主）2.2 MB {3} [初始] [渲染]块{2} styles.056656ed596d26ba0192.bundle.css （样式）69个字节{4 } [initial] [rendered] chunk {3} vendor.e1de06303258c58c9d01.bundle.js（vendor）3.35 MB [initial] [rendered] chunk {4 } inline.3ae24861b3637391ba70.bundle.js（内联） 0字节[条目] [渲染]

注卖主束具有降低半兆字节！

即使您已经熟悉外部库，也值得检查角度标准包可以做什么。

来源

2017-10-09 06:20:54 kwalski

使用最新角度CLI版本，并使用命令纳克构建--prod --build的优化 必定会减少为督促ENV的建筑面积。

这是引擎盖下构建优化做什么：

构建优化有两个主要的工作。首先，我们可以将应用程序的某些部分标记为纯粹的，这样可以改善现有工具提供的树震动，从而删除不需要的应用程序的其他部分。

构建优化做的第二件事是从您的应用程序运行时代码删除角装饰。装饰器由编译器使用，并且在运行时不需要，可以删除。这些作业中的每一个都会减少JavaScript包的大小，并为用户提高应用程序的启动速度。

注意：对角5一个更新，该NG构建--prod自动采取上述过程的照顾:)

来源

2017-10-18 07:08:27

以下解决方案假定您正在使用的服务您的NodeJS DIST /文件夹。请在根级别使用以下app.js

const express = require('express'),http = require('http'),path = require('path'),compression = require('compression'); 

const app = express(); 

app.use(express.static(path.join(__dirname, 'dist'))); 
app.use(compression()) //compressing dist folder 
app.get('*', (req, res) => { 
    res.sendFile(path.join(__dirname, 'dist/index.html')); 
}) 

const port = process.env.PORT || '4201'; 
app.set('port', port); 

const server = http.createServer(app); 
server.listen(port,() => console.log('Running at port ' + port))

确保您安装了依赖关系;

npm install compression --save 
npm install express --save;

现在构建应用程序

ng build --prod --build-optimizer

如果您想进一步压缩构建从说减少300KB（约），然后按照下面的过程;

创建一个名为vendor的src文件夹内以及供应商文件夹中创建一个文件rxjs.ts并粘贴在它下面的代码文件夹;

export {Subject} from 'rxjs/Subject'; 
export {Observable} from 'rxjs/Observable'; 
export {Subscription} from 'rxjs/Subscription';

，然后添加在tsconfig.json文件follwing在角CLI应用。然后在compilerOptions中添加下面的json;

"paths": { 
     "rxjs": [ 
     "./vendor/rxjs.ts" 
     ] 
    }

这会让你的建筑面积太小。在我的项目中，我将尺寸从11mb减小到1mb。希望它可以帮助

来源

2018-03-07 04:58:27

Angular2 CLI巨大的供应商捆绑：如何提高产品尺寸？

回答

相关问题