如何正确构建优化Angular 5项目？

Question

我是Angular 5项目的新手.我跑去ng build --prod生成一个dist/文件夹.

我注意到构建需要相当长的时间,当我打开我的dist/文件夹时,我看到它有近98%无用的东西,比如SVG,图像等等.

我如何控制进入我的内容dist/？

---

.angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "web"
  },
  "apps": [{
    "root": "src",
    "outDir": "dist",
    "assets": [
      "assets",
      "favicon.ico"
    ],
    "index": "index.html",
    "main": "main.ts",
    "polyfills": "polyfills.ts",
    "test": "test.ts",
    "tsconfig": "tsconfig.app.json",
    "testTsconfig": "tsconfig.spec.json",
    "prefix": "app",
    "styles": [
      "styles.css",
      "../node_modules/bootstrap/dist/css/bootstrap.min.css",
      "../node_modules/ngx-toastr/toastr.css",
      "../src/assets/css/style.css",
      "../src/assets/css/colors/blue.css"

    ],
    "scripts": [
      "../node_modules/jquery/dist/jquery.min.js",
      "../node_modules/popper.js/dist/umd/popper.min.js",
      "../node_modules/bootstrap/dist/js/bootstrap.min.js",
      "../node_modules/jquery-slimscroll/jquery.slimscroll.min.js",
      "../node_modules/pace-js/pace.min.js"
    ],
    "environmentSource": "environments/environment.ts",
    "environments": {
      "dev": "environments/environment.ts",
      "prod": "environments/environment.prod.ts"
    }
  }],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [{
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

---

的package.json

{
  "name": "web",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 4202",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "5.1.0",
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@angular/router": "5.0.3",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.5",
    "@ngx-translate/core": "8.0.0",
    "@types/jquery": "3.2.16",
    "angular2-image-upload": "^1.0.0-rc.0",
    "bootstrap": "4.0.0-beta.2",
    "core-js": "2.4.1",
    "jquery": "3.2.1",
    "jquery-slimscroll": "1.3.8",
    "ngx-toastr": "8.0.0",
    "ngx-uploader": "4.2.1",
    "pace-js": "1.0.2",
    "popper.js": "1.13.0",
    "rxjs": "5.5.0",
    "sticky-kit": "1.1.3",
    "zone.js": "0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.4",
    "@angular/compiler-cli": "5.0.3",
    "@angular/language-service": "5.0.3",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }
}

---

我该如何优化它？并且只构建我的网站需要什么？

目前,在我的服务器上构建需要15分钟.如何让它更快地构建？

Answer 1

对于构建缓慢,您可以使用此版本的角度cli:

"@angular/cli": "1.7.0-beta.0",

这将我的建筑时间从30分钟减少到3分钟.

在Angular 5中,AOT和构建优化器默认为prod构建.

ng build --prod --named-chunks在构建命令中添加--named-chunks将为您提供命名块,以便您可以更好地分析块,并更好地增强每个模块中导入的内容.您可能正在使用该共享模块中的一个东西将整个共享模块导入某个模块的示例

Answer 2

您需要花点时间分析您的依赖关系以及它们对您的构建dist输出的影响.

建立:

ng build --target=production --environment=prod --aot --build-optimizer -sourcemaps --stats-json

(虽然隐含了其中一些参数,但如果环境修改超出默认值,我会选择详细程度.)

这将输出一个stats.json文件,然后可以webpack-bundle-analyzer通过运行来分析:webpack-bundle-analyzer dist/stats.json

删除不必要的库,重构树摇动,用替代品替换不负责任的大型库.

如果没有看到你的package.json内容,这应该为你提供一个开始理解生产优化的起点.

参考文献:

• angular cli build spec:https://github.com/angular/angular-cli/wiki/build#bundling--tree-shaking
• 精彩的文章让您入门:https://yakovfain.com/2017/08/03/angular-cli-dev-and-prod-builds-with-jit-and-aot/

Answer 3

我找到的一个很棒的工具是源地图浏览器.它是一个工具,向您显示用于模块中使用的所有导入的空间.当我运行源地图资源管理器时,该图像是我的管理模块的一个示例:

这个工具帮了我很多指点我忘记删除的一些导入,并且让我的文件太大了.

Answer 4

这不是垃圾，默认情况下 ng build 命令将获取开发人员配置文件，并使用项目上所有必需的文件构建 dist（例如，ts 被编译为 js）。因为默认情况下它是一个开发配置文件，所以您会看到诸如命名的 .chunk 文件之类的内容。开发人员配置文件和产品配置文件也有不同的依赖项，具体取决于您的 package.json 文件。

请参阅https://github.com/angular/angular-cli/wiki/build