angular 8 不兼容IE11
<h2 id="differential-loading">差异化加载</h2><p>在构建 Web 应用时，确保你的应用与大多数浏览器兼容是目标之一。JavaScript 在不断发展，新功能不断推出，不是所有浏览器都能以同样的进度实现这些新功能。这就是编译和腻子脚本（polyfill）的用武之地。你在开发过程中使用 TypeScript 编写的代码会被编译并打包成一种兼容大多数浏览器的格式，通常为 ES5。 腻子脚本用于抹平差距，提供一些老式浏览器中根本不存在的功能。</p>
<p>确保这种浏览器的兼容性是有代价的，那就是更大的包体积。所有现代浏览器都支持 ES2015 及更高版本，但在大多数情况下，你仍然要考虑那些从老式浏览器访问你的应用的用户。为了最大限度地提高兼容性，你需要发布一个包含所有已编译代码的发布包（bundle），以及所有可能会用到的腻子脚本。用户如果在支持大量最新 JavaScript 特性的现代浏览器中使用此应用，他就不应该为这些额外的包体积付出启动时间和流量等方面的代价。这就是差异化加载发挥作用的地方。</p>
<p>差异化加载是指 CLI 在构建应用时，构建两个单独发布包的策略。现代的发布包中包含了现代的语法，利用了现代浏览器的内置支持，减少了腻子脚本的运行需求，减小了发布包的大小。第二个发布包中则包含了额外的编译代码，所有必需的腻子脚本，并导致了更大的包大小。这个策略允许你继续构建你的 Web 应用来支持多个浏览器，但是只加载相应浏览器中必需的代码。</p>
<h3 id="configuring-differential-loading">配置差异化加载</h3>
<p>Angular CLI 第 8 版及更高版本已支持构建差异化加载的发布包。工作空间中的每个应用项目，都可以根据其中的 <code>browserslist</code> 和 <code>tsconfig.json</code> 文件来配置发布包的构建方式。</p>
<p>来看看新创建的 Angular 应用的默认配置：</p>
<p><code>browserslist</code> 是这样的：</p>
<pre class="prettyprint lang-"><code class="animated fadeIn"><span class="pun">><span class="pln"> <span class="lit">0.5<span class="pun">%<span class="pln">
<span class="kwd">last<span class="pln"> <span class="lit">2<span class="pln"> versions
<span class="typ">Firefox<span class="pln"> ESR
<span class="kwd" style="color: rgba(255, 0, 0, 1)">not<span class="pln"> dead
<span class="kwd">not<span class="pln"> IE <span class="lit">9<span class="pun">-<span class="lit">11<span class="pln"> <span class="com"># For IE 9-11 support, remove 'not'.</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
<p><code>tsconfig.json</code> 是这样的：</p>
<div>
<div>
<div>{</div>
<div>"compileOnSave": false,</div>
<div>"compilerOptions": {</div>
<div>"importHelpers": true,</div>
<div>"module": "esnext",</div>
<div>"outDir": "./dist/out-tsc",</div>
<div>"sourceMap": true,</div>
<div>"declaration": false,</div>
<div>"moduleResolution": "node",</div>
<div>"emitDecoratorMetadata": true,</div>
<div>"experimentalDecorators": true,</div>
<div><span style="color: rgba(255, 0, 0, 1)">"target": "es2015",</span></div>
<div>"typeRoots": [</div>
<div>"node_modules/@types"</div>
<div>],</div>
<div>"lib": [</div>
<div>"es2017",</div>
<div>"dom"</div>
<div>],</div>
<div>"plugins": [</div>
<div>{ "name": "tslint-language-service"}</div>
<div>]</div>
<div>}</div>
<div>}</div>
</div>
</div>
<pre class="prettyprint lang-"><code class="animated fadeIn"> </code></pre>
<p>默认情况下，会忽略老式浏览器（如IE 9-11），其编译目标设置为 ES2015。结果就会生成两个发布包，并启用差异化加载。如果忽略全部不支持 ES2015 的浏览器，就只会生成一个版本。要了解不同配置下差异化加载的构建结果，请参考下表。</p>
<p><img src="https://img2018.cnblogs.com/blog/436034/201908/436034-20190826134443785-635446899.png" alt=""></p>
<p> </p>
<p>如上红色字体显示：把<code>browserslist</code> 中的not移除，<code>tsconfig.json</code> 的"target":改为“es5”即可，但会增加体积</p>
<p> </p><br><br>
来源：https://www.cnblogs.com/guangmangchen/p/11412102.html
頁:
[1]