2016-11-16 39 views
1

我使用angular-cli在anuglar项目上工作。 在dev模式下生成的main.bundle大小约为4.32 MB。角度项目的包大小?

bundle dev

下面个用于产生生成与如下因素CMD束尺寸:

ng build --target=production --environment=prod 

bundle prod

在PROD模式的所有请求的大小为约2.5MB。 firebug network

是它很少依赖关系,模块和组件项目的accepeted大小?

{ 
    "name": "frontend", 
    "version": "0.0.0", 
    "license": "MIT", 
    "angular-cli": {}, 
    "scripts": { 
    "start": "ng serve", 
    "lint": "tslint \"src/**/*.ts\"", 
    "test": "ng test", 
    "pree2e": "webdriver-manager update", 
    "e2e": "protractor" 
    }, 
    "private": true, 
    "dependencies": { 
    "@angular/common": "2.2.0", 
    "@angular/compiler": "2.2.0", 
    "@angular/core": "2.2.0", 
    "@angular/forms": "2.2.0", 
    "@angular/upgrade": "2.2.0", 
    "@angular/http": "2.2.0", 
    "@angular/platform-browser": "2.2.0", 
    "@angular/platform-browser-dynamic": "2.2.0", 
    "@angular/router": "3.2.0", 
    "core-js": "^2.4.1", 
    "ng2-translate": "^4.0.0", 
    "primeng": "^1.0.0-rc.4", 
    "rxjs": "5.0.0-beta.12", 
    "ts-helpers": "^1.1.1", 
    "zone.js": "^0.6.23" 
    }, 
    "devDependencies": { 
    "@types/jasmine": "^2.2.30", 
    "angular-cli": "1.0.0-beta.19-3", 
    "codelyzer": "~0.0.26", 
    "jasmine-core": "2.4.1", 
    "jasmine-spec-reporter": "2.5.0", 
    "karma": "1.2.0", 
    "karma-chrome-launcher": "^2.0.0", 
    "karma-cli": "^1.0.1", 
    "karma-jasmine": "^1.0.2", 
    "karma-remap-istanbul": "^0.2.1", 
    "protractor": "4.0.5", 
    "ts-node": "1.2.1", 
    "tslint": "3.13.0", 
    "typescript": "2.0.2" 
    } 
} 

** AOT编译失败与如下因素堆栈跟踪:

>ng build --prod --aot 
    0% compilingthis._directiveNormalizer.normalizeTemplate is not a function 
TypeError: this._directiveNormalizer.normalizeTemplate is not a function 
    at CompileMetadataResolver._loadDirectiveMetadata (C:\dev\clients\cf\projects\op\frontend\node_modules\@angular\compiler\bundles\compiler.umd.js:14493:60) 
    at C:\dev\clients\cf\projects\op\frontend\node_modules\@angular\compiler\bundles\compiler.umd.js:14644:50 
    at Array.forEach (native) 
    at CompileMetadataResolver._loadNgModuleMetadata (C:\dev\clients\cf\projects\op\frontend\node_modules\@angular\compiler\bundles\compiler.umd.js:14634:56) 
    at CompileMetadataResolver.loadNgModuleMetadata (C:\dev\clients\cf\projects\op\frontend\node_modules\@angular\compiler\bundles\compiler.umd.js:14566:31) 
    at addNgModule (C:\dev\clients\cf\projects\op\frontend\node_modules\@angular\compiler\bundles\compiler.umd.js:12915:37) 
    at C:\dev\clients\cf\projects\op\frontend\node_modules\@angular\compiler\bundles\compiler.umd.js:12929:16 
    at Array.forEach (native) 
    at _loadNgModules (C:\dev\clients\cf\projects\op\frontend\node_modules\@angular\compiler\bundles\compiler.umd.js:12928:28) 
    at analyzeNgModules (C:\dev\clients\cf\projects\op\frontend\node_modules\@angular\compiler\bundles\compiler.umd.js:12685:14) 
    at OfflineCompiler.compileModules (C:\dev\clients\cf\projects\op\frontend\node_modules\@angular\compiler\bundles\compiler.umd.js:12744:18) 
    at CodeGenerator.codegen (C:\Users\iminar\Dev\angular\modules\@angular\compiler-cli\src\codegen.ts:71:26) 
    at AotPlugin._make (C:\dev\clients\cf\projects\op\frontend\node_modules\@ngtools\webpack\src\plugin.js:186:43) 
    at Compiler.<anonymous> (C:\dev\clients\cf\projects\op\frontend\node_modules\@ngtools\webpack\src\plugin.js:151:75) 
    at Compiler.applyPluginsParallel (C:\dev\clients\cf\projects\op\frontend\node_modules\tapable\lib\Tapable.js:156:14) 
    at Compiler.<anonymous> (C:\dev\clients\cf\projects\op\frontend\node_modules\webpack\lib\Compiler.js:463:8) 
    at Compiler.applyPluginsAsync (C:\dev\clients\cf\projects\op\frontend\node_modules\tapable\lib\Tapable.js:73:70) 
    at Compiler.compile (C:\dev\clients\cf\projects\op\frontend\node_modules\webpack\lib\Compiler.js:456:7) 
    at Compiler.<anonymous> (C:\dev\clients\cf\projects\op\frontend\node_modules\webpack\lib\Compiler.js:219:10) 
    at Compiler.readRecords (C:\dev\clients\cf\projects\op\frontend\node_modules\webpack\lib\Compiler.js:367:10) 
    at Compiler.<anonymous> (C:\dev\clients\cf\projects\op\frontend\node_modules\webpack\lib\Compiler.js:216:9) 
    at next (C:\dev\clients\cf\projects\op\frontend\node_modules\tapable\lib\Tapable.js:81:11) 
    at Compiler.<anonymous> (C:\dev\clients\cf\projects\op\frontend\node_modules\webpack\lib\CachePlugin.js:34:58) 
    at Compiler.applyPluginsAsync (C:\dev\clients\cf\projects\op\frontend\node_modules\tapable\lib\Tapable.js:85:13) 
    at Compiler.<anonymous> (C:\dev\clients\cf\projects\op\frontend\node_modules\webpack\lib\Compiler.js:213:8) 
    at next (C:\dev\clients\cf\projects\op\frontend\node_modules\tapable\lib\Tapable.js:81:11) 
    at Compiler.<anonymous> (C:\dev\clients\cf\projects\op\frontend\node_modules\webpack\lib\node\NodeEnvironmentPlugin.js:23:3) 
    at Compiler.applyPluginsAsync (C:\dev\clients\cf\projects\op\frontend\node_modules\tapable\lib\Tapable.js:85:13) 
    at Compiler.run (C:\dev\clients\cf\projects\op\frontend\node_modules\webpack\lib\Compiler.js:210:7) 
    at C:\dev\clients\cf\projects\op\frontend\node_modules\angular-cli\tasks\build-webpack.js:26:29 
    at initializePromise (C:\dev\clients\cf\projects\op\frontend\node_modules\es6-promise\dist\lib\es6-promise\-internal.js:244:5) 
    at new Promise (C:\dev\clients\cf\projects\op\frontend\node_modules\es6-promise\dist\lib\es6-promise\promise.js:135:31) 
    at Class.exports.default.Task.extend.run (C:\dev\clients\cf\projects\op\frontend\node_modules\angular-cli\tasks\build-webpack.js:25:16) 
    at Class.Command.extend.run (C:\dev\clients\cf\projects\op\frontend\node_modules\angular-cli\commands\build.js:50:26) 
    at Class.<anonymous> (C:\dev\clients\cf\projects\op\frontend\node_modules\angular-cli\lib\models\command.js:152:17) 
    at tryCatch (C:\dev\clients\cf\projects\op\frontend\node_modules\rsvp\dist\lib\rsvp\-internal.js:215:12) 
    at invokeCallback (C:\dev\clients\cf\projects\op\frontend\node_modules\rsvp\dist\lib\rsvp\-internal.js:230:13) 
    at C:\dev\clients\cf\projects\op\frontend\node_modules\rsvp\dist\lib\rsvp\then.js:29:16 
    at flush (C:\dev\clients\cf\projects\op\frontend\node_modules\rsvp\dist\lib\rsvp\asap.js:85:5) 
    at nextTickCallbackWith0Args (node.js:420:9) 
    at process._tickCallback (node.js:349:13) 

** Actvating Tomcat上压缩减少发送到客户端的数据: network gzip enabled

+2

是的,这很正常。如果它适用于您,您可以使用AoT编译(命令'ng build --prod --aot')使其更小。如果你的服务器支持gzip,你将通过电线发送得更少。例如,当我用'compression'中间件运行dev服务器时,bunle的大小是2.1MB,这与gzip是335KB ... – Sasxa

+0

我会尝试如果aot编译工作和gzip config for tomcat。 –

回答

3

是其外观良好。

,如果你想降低您的应用程序的大小,你可以下面的事情做

  1. 将您的应用程序中的子模块,并使用延迟加载。
  2. 使用AoT编译机制,这将编译您的代码,而不是您部署可运行代码并在JIT中(及时)编译机制代码在用户浏览器中编译。
  3. 您可以应用gzip并缩小文件。

这些步骤将帮助您减少应用程序的大小。

+0

该应用程序已在模块中划分,我使用延迟加载。如果AOT编译适用于我,我会尝试。 –

+0

是尝试AoT和gzip和缩小也。它会帮助你。 –

+0

有一个问题是你在html的头文件中使用任何外部的CSS?或字体? –