angular 8 不兼容IE11

差异化加载

在构建 Web 应用时,确保你的应用与大多数浏览器兼容是目标之一。JavaScript 在不断发展,新功能不断推出,不是所有浏览器都能以同样的进度实现这些新功能。这就是编译和腻子脚本(polyfill)的用武之地。你在开发过程中使用 TypeScript 编写的代码会被编译并打包成一种兼容大多数浏览器的格式,通常为 ES5。 腻子脚本用于抹平差距,提供一些老式浏览器中根本不存在的功能。

确保这种浏览器的兼容性是有代价的,那就是更大的包体积。所有现代浏览器都支持 ES2015 及更高版本,但在大多数情况下,你仍然要考虑那些从老式浏览器访问你的应用的用户。为了最大限度地提高兼容性,你需要发布一个包含所有已编译代码的发布包(bundle),以及所有可能会用到的腻子脚本。用户如果在支持大量最新 JavaScript 特性的现代浏览器中使用此应用,他就不应该为这些额外的包体积付出启动时间和流量等方面的代价。这就是差异化加载发挥作用的地方。

差异化加载是指 CLI 在构建应用时,构建两个单独发布包的策略。现代的发布包中包含了现代的语法,利用了现代浏览器的内置支持,减少了腻子脚本的运行需求,减小了发布包的大小。第二个发布包中则包含了额外的编译代码,所有必需的腻子脚本,并导致了更大的包大小。这个策略允许你继续构建你的 Web 应用来支持多个浏览器,但是只加载相应浏览器中必需的代码。

配置差异化加载

Angular CLI 第 8 版及更高版本已支持构建差异化加载的发布包。工作空间中的每个应用项目,都可以根据其中的 browserslist 和 tsconfig.json 文件来配置发布包的构建方式。

来看看新创建的 Angular 应用的默认配置:

browserslist 是这样的:

> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11 # For IE 9-11 support, remove 'not'.

tsconfig.json 是这样的:

{
"compileOnSave": false,
"compilerOptions": {
"importHelpers": true,
"module": "esnext",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom"
],
"plugins": [
{ "name": "tslint-language-service"}
]
}
}
 

默认情况下,会忽略老式浏览器(如IE 9-11),其编译目标设置为 ES2015。结果就会生成两个发布包,并启用差异化加载。如果忽略全部不支持 ES2015 的浏览器,就只会生成一个版本。要了解不同配置下差异化加载的构建结果,请参考下表。

 

如上红色字体显示:把browserslist 中的not移除,tsconfig.json 的"target":改为“es5”即可,但会增加体积

 

posted @ 2019-08-26 13:48  烛煌  阅读(2629)  评论(0编辑  收藏  举报