我正在使用 Webpack 并成功从 Angular 2 升级到 Angular 4。但是,我没有看到预期的 60% 文件大小减少,无论是我的编译供应商.js还是应用程序.js。
供应商.js之前: 913KB现: 975KB
应用.js之前: 308KB现: 307KB
我错过了什么?我们是否需要使用 Angular CLI 来利用文件大小减小的优势?
我的包.json:
"dependencies": {
"@angular/common": "~4.0.1",
"@angular/compiler": "~4.0.1",
"@angular/core": "~4.0.1",
"@angular/forms": "~4.0.1",
"@angular/http": "~4.0.1",
"@angular/platform-browser": "~4.0.1",
"@angular/platform-browser-dynamic": "~4.0.1",
"@angular/router": "~4.0.1",
"core-js": "^2.4.1",
"rxjs": "5.0.1",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@types/node": "^6.0.45",
"angular2-template-loader": "^0.6.0",
"awesome-typescript-loader": "^3.0.4",
"copy-webpack-plugin": "^4.0.0",
"css-loader": "^0.25.0",
"css-to-string-loader": "^0.1.2",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.15.0",
"ng2-facebook-sdk": "^1.1.0",
"null-loader": "^0.1.1",
"raw-loader": "^0.5.1",
"resolve-url": "^0.2.1",
"rimraf": "^2.5.2",
"style-loader": "^0.13.1",
"to-string-loader": "^1.1.5",
"typescript": "~2.1.6",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1",
"webpack-merge": "^0.14.0"
}
}
基于 Estus 评论(谢谢(。我们需要使用 AoT(提前编译(而不是通常的 JiT(即时编译(,以便利用 Angular 4 尺寸减小和速度增强。将 AoT 与 Angular CLI 结合使用,并为客户端浏览器(平台浏览器(创建 AoT。
请参阅 Angular 提前编译手册
不要将其与使用通用(使用平台服务器的另一种形式的 AoT(在服务器上运行 Angular 以获得搜索引擎索引和 SEO 好处相混淆。
角度通用文档