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

时间：2018-01-25 04:50:41

标签： javascript angular webpack angular-cli angular5

我是Angular 5项目的新手。我运行了ng build --prod来生成dist/文件夹。

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

如何控制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 分钟。如何让它更快地构建？

9 个答案:

答案 0 :(得分：12)

如果构建速度很慢，可以使用此版本的angular cli：

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

这将我的建造时间从30分钟减少到3分钟。

在Angular 5中，AOT和构建优化器默认为prod版本。

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

答案 1 :(得分：5)

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

构建：

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

（虽然其中一些论点是暗示的，但是如果环境被修改为超出默认值，我选择了详细程度。）

哪个会输出一个stats.json文件，然后可以通过webpack-bundle-analyzer运行webpack-bundle-analyzer dist/stats.json来分析@namespace("example.avro") protocol User { record Man { int age; } record Woman { int age; } record User { union { Man, Woman } user_info; } }

删除不必要的库，重构树抖动，用替代方法替换不负责任的大型库。

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

参考文献：

答案 2 :(得分：5)

我找到的一个很棒的工具是source map explorer。它是一个工具，向您显示用于模块中使用的所有导入的空间。当我运行源地图资源管理器时，该图像是我的管理模块的一个示例：

enter image description here

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

答案 3 :(得分：2)

它不是垃圾，默认情况下，ng build命令会选择开发人员配置文件，并使用项目中所有必需的文件构建dist（例如，ts编译为js）。因为默认情况下它是一个dev配置文件，所以你会看到类似命名的.chunk文件.Developer配置文件和prod配置文件也有不同的依赖关系，具体取决于你的package.json文件。

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

答案 4 :(得分：2)

ng build --aot --prod --build-optimizer

尽管在使用ng build --prod时将aot和build优化器组合在一起 因此只需使用ng build --prod

答案 5 :(得分：1)

使用此命令优化角度5/6的构建：

node --max_old_space_size=5048 ./node_modules/.bin/ngbuild --aot --prod --build-optimizer

答案 6 :(得分：0)

您可以在生产构建后运行brotli压缩，这将缩短加载时间。 https://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/

答案 7 :(得分：0)

您可以使用节点参数--max_old_space_size=5048。但我更喜欢通过环境进行设置：

NODE_OPTIONS=--max-old-space-size=4096

它两次加快了我们在CI管道上的构建过程。

答案 8 :(得分：-1)

config in angular.json

 "configurations": {
  "production": {
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot":true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": false,
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
  }
}
and build your project :

 node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng build --prod --build-optimizer=true --vendor-chunk=true --aot --base-href "/project/app"
相关问题
最新问题