【发布时间】：2019-10-30 05:47:25
【问题描述】：
如果您检查网络选项卡，我在 (https://anyteam.work/en/) 上有一个 ng 8 应用程序可用，角度制作请求两次！！！这些文件是 4mb，但由于它们被调用了两次，我的页面加载几乎是 9mb！！！还有一件事，当我的应用程序处于 angular 7 时，我的包大小为 3mb，在更改为 angular 8 后，相同代码的包大小变为 3.5mb，我想知道这 500k 额外包大小是因为新版本的框架，或者当我的纱线记录一些软件包对某些旧版本具有不正确的对等依赖关系时，旧的依赖关系也会被捆绑？
index.html的内容是
<!DOCTYPE html>
<html lang="{0}" dir="{1}" data-debug="{2}" data-user-id="{3}">
<head>
<meta charset="utf-8" />
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
name="viewport"
/>
<link
data-do-not-remove-me="true"
href="/assets/bootstrap/bootstrap.{1}.min.css"
rel="stylesheet"
/>
<link
data-do-not-remove-me="true"
href="/assets/styles/loader.css"
rel="stylesheet"
/>
<link
data-do-not-remove-me="true"
href="/assets/pwa/favicon.ico"
rel="icon"
type="image/x-icon"
/>
<title>Any Team | achasoft.com</title>
</head>
<body>
<div id="app-loading-container" class="waiting-container full-screen">
<span class="waiting-spinner"></span>
</div>
<app-panel-root></app-panel-root>
<script
data-do-not-remove-me="true"
type="text/javascript"
src="/{0}/dynamics/translates"
></script>
<script
data-do-not-remove-me="true"
type="text/javascript"
src="/{0}/dynamics/enums"
></script>
</body>
</html>
angular.json的部分内容
{
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "projects/main",
"sourceRoot": "projects/main/src",
"prefix": "app-main",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "../backend/AchaApplication.Web/wwwroot/app/main",
"index": "projects/main/src/index.html",
"main": "projects/main/src/main.ts",
"polyfills": "projects/main/src/polyfills.ts",
"tsConfig": "projects/main/tsconfig.app.json",
"assets": [
"projects/main/src/favicon.ico",
"projects/main/src/assets"
],
"styles": [
"projects/main/src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "projects/main/src/environments/environment.ts",
"with": "projects/main/src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "5mb",
"maximumError": "6mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "main:build"
},
"configurations": {
"production": {
"browserTarget": "main:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "main:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/main/src/test.ts",
"polyfills": "projects/main/src/polyfills.ts",
"tsConfig": "projects/main/tsconfig.spec.json",
"karmaConfig": "projects/main/karma.conf.js",
"assets": [
"projects/main/src/favicon.ico",
"projects/main/src/assets"
],
"styles": [
"projects/main/src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"projects/main/tsconfig.app.json",
"projects/main/tsconfig.spec.json",
"projects/main/e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "projects/main/e2e/protractor.conf.js",
"devServerTarget": "main:serve"
},
"configurations": {
"production": {
"devServerTarget": "main:serve:production"
}
}
}
}
}
【问题讨论】：
-
你能指定使用的命令是
ng build --prod --aot吗？ -
为什么禁用缓存？我认为这可能会对资源产生影响。
-
我没有使用 --aot 它是什么？
-
仅在开发时，并且当控制台打开时，才禁用缓存:)
-
@NavidKianfar
--aot标志将编译器从JIT- 即时编译器更改为AOT- 提前编译器。导致更小的优化构建尺寸。 （推荐用于生产版本）还有其他选项，如--build-optimizer=true和--vendor-chunk=true以获取更多详细信息 angular.io/cli/build