Javascript 如何正确构建优化的 Angular 5 项目？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48435876/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to properly build an optimize Angular 5 Project?
提问by cyber8200
I'm new to Angular 5 project. I ran ng build --prodto generate a dist/folder.
我是 Angular 5 项目的新手。我跑去ng build --prod生成一个dist/文件夹。
I noticed it takes quite a long time to build, and when I opened up my dist/folder, I saw it has almost 98% useless stuff in there, like SVGs, images, and so on ..
我注意到构建需要很长时间，当我打开我的dist/文件夹时，我看到里面几乎有 98% 没用的东西，比如 SVG、图像等等。
How do I control what goes into my dist/?
我如何控制进入我的dist/?
.angular-cli.json
.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
包.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"
}
}
How do I optimizeit? And only build what require for my site?
我如何优化它？并且只构建我的网站所需的内容？
Currently, it takes 15minutes to build on my server. How do I make it build faster?
目前，在我的服务器上构建需要15分钟。如何让它更快地构建？
回答by Nadhir Falta
For the build being slow you can use this version of the angular cli:
对于缓慢的构建，您可以使用此版本的 angular cli：
"@angular/cli": "1.7.0-beta.0",
"@angular/cli": "1.7.0-beta.0",
this cut my building time from 30 minutes to 3 minutes.
这将我的构建时间从 30 分钟缩短到 3 分钟。
In Angular 5, AOT and build-optimizer are by default in prod builds.
在 Angular 5 中，AOT 和 build-optimizer 默认在 prod 构建中。
ng build --prod --named-chunksadding --named-chunks to your build command will give you named chunks so you can better analyze you chunks, and better enhance what you are importing in each module.
An example that maybe you are importing the whole shared module into a certain module while you just use one thing from that shared module
ng build --prod --named-chunks将 --named-chunks 添加到您的构建命令将为您提供命名块，以便您可以更好地分析块，并更好地增强您在每个模块中导入的内容。一个示例，也许您将整个共享模块导入某个模块，而您只使用该共享模块中的一件事
回答by yomateo
You need to take a moment to analyze your dependencies and the impact they are having on your builds dist output.
您需要花点时间分析您的依赖项以及它们对您的构建 dist 输出的影响。
Build with:
构建：
ng build --target=production --environment=prod --aot --build-optimizer -sourcemaps --stats-json
(Though some of these arguments are implied, I chose verbosity in the event the environment has been modified beyond defaults.)
（虽然其中一些参数是隐含的，但如果环境被修改为超出默认值，我选择了冗长。）
Which will output a stats.jsonfile that can then be analyzed with webpack-bundle-analyzerby running: webpack-bundle-analyzer dist/stats.json
这将输出一个stats.json文件，然后可以webpack-bundle-analyzer通过运行进行分析：webpack-bundle-analyzer dist/stats.json
Remove unnecessary libraries, refactor for tree shaking, replace irresponsibly large libraries with alternatives.
删除不必要的库，重构摇树，用替代品替换不负责任的大型库。
Without seeing your package.json contents this should give you a starting point to begin understanding optimization for production.
没有看到你的 package.json 内容，这应该给你一个开始理解生产优化的起点。
References:
参考：
- angular cli build spec: https://github.com/angular/angular-cli/wiki/build#bundling--tree-shaking
- Great write-up to get you started: https://yakovfain.com/2017/08/03/angular-cli-dev-and-prod-builds-with-jit-and-aot/
回答by Pedro Arantes
A great tool I found was source map explorer. It's a tool that shows to you space used for all imports you use in a module. The image is an example of my admin module when I run source map explorer:
我发现的一个很棒的工具是source map explorer。它是一个工具，可向您显示用于您在模块中使用的所有导入的空间。该图像是我运行源映射资源管理器时管理模块的示例：
This tool helped me a lot pointing me some imports that I forgot to remove and was letting my files too large.
这个工具帮了我很多，指出我忘记删除的一些导入并且让我的文件太大。
回答by Asura
It's not junk, the ng build command by default will pick up the developer profile and will build the dist with all the required file on your project(ts get compiled to js for example). Because its a dev profile by default you see thing like the named .chunk file amongst other thing.Developer profile and prod profile also have different dependencies depending on your package.json file.
它不是垃圾，默认情况下 ng build 命令将获取开发人员配置文件，并将使用项目中的所有必需文件构建 dist（例如，ts 被编译为 js）。因为默认情况下它是一个开发配置文件，所以您会看到诸如命名的 .chunk 文件之类的东西。开发人员配置文件和生产配置文件也有不同的依赖项，具体取决于您的 package.json 文件。
回答by Abhay Kumar
ng build --aot --prod --build-optimizer
Although aot and build optimizer are combined when using ng build --prodso simply use ng build --prod
虽然 aot 和 build 优化器在使用时结合使用，ng build --prod所以简单地使用ng build --prod
回答by nagender pratap chauhan
Use this command to optimize the build for angular 5/6:
使用此命令优化角度 5/6 的构建：
node --max_old_space_size=5048 ./node_modules/.bin/ngbuild --aot --prod --build-optimizer
回答by Sanju
you can run brotlicompression after production build, which will improve the loading time.
https://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/
您可以brotli在生产构建后运行压缩，这将缩短加载时间。
https://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/
回答by siva
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"
