Question

我正在使用Webpack并成功从Angular 2升级到Angular 4。但是，我没有看到预期的60％文件大小减少我的编译vendor.js和app.js。

vendor.js 之前：913kb 现在：975kb

app.js 之前：308kb 现在：307kb

我错过了什么？我们是否需要使用Angular CLI来利用文件大小减少？

我的package.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"
  }
}

Answer 1

基于Estus的评论（谢谢）。我们需要使用AoT（Ahead of Time Compilation）而不是通常的JiT（即时编译）才能利用Angular 4尺寸缩小和速度增强。将AoT与Angular Cli结合使用，为客户端浏览器（平台浏览器）创建AoT。

请参阅Angular ahead-of-time compilation cookbook

使用Universal（另一种使用平台服务器的AoT形式），不要将服务器上运行Angular与搜索引擎索引和SEO优势混淆。

Angular Universal Doc

从Angular 2到Angular 4 - 文件大小减小和速度增强

1 个答案: