如果您检查网络选项卡，我在( https://anyteam.work/en/ )上有一个 ng 8 应用程序可用， Angular 发出两次请求!这些文件有 4mb，但由于它们被调用了两次，我的页面负载几乎是 9mb!还有一件事，当我的应用程序处于 Angular 7 中时，我的包大小为 3MB，更改为 Angular 8 后，相同代码的包大小变为 3.5MB，我想知道由于新版本的框架，这 500k 额外的包大小，或者当我的 yarn 日志提示某些包对某些旧版本具有不正确的对等依赖性时，旧的依赖项也会被 bundle 在一起？
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"
}
}
}
}
}
最佳答案
这是因为 Angular 8 中引入了名为差异加载的新功能。
差异加载是一种策略，其中 CLI 构建两个单独的包作为已部署应用程序的一部分。
第一个包包含现代 ES2015 语法，利用 现代浏览器中的内置支持，减少了填充，并且 导致 bundle 尺寸更小。
第二个包包含旧 ES5 语法中的代码，以及所有 必要的填充。这会导致 bundle 尺寸更大，但是 支持旧版浏览器。
此策略允许您继续构建 Web 应用程序以支持多个浏览器，但仅加载浏览器所需的必要代码。
<强> Configuring Differential Loading
Angular CLI 版本 8 及更高版本默认支持差异加载。对于工作区中的每个应用程序项目，您可以根据应用程序项目中的 browserslist 和 tsconfig.json 文件配置如何生成构建。
引用here了解更多详情。
选择退出差异加载
如果差异加载导致意外问题或者您需要专门针对旧版浏览器支持来定位 ES5，则可以显式禁用差异加载。
显式禁用差异加载:
- 在
browserslist配置文件中启用死浏览器或 IE 浏览器 删除它们前面的not关键字。将目标设定在compilerOptions到es5。
此详细信息来自 Angular 文档，请参阅 here了解更多详情
关于Angular 8 加载应用程序 Assets 两次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58619374/