zoukankan      html  css  js  c++  java
  • 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”即可,但会增加体积

  • 相关阅读:
    Python 用SMTP发送邮件
    Python 用IMAP接收邮件
    E-mail Composition and Decoding
    用Python实现gmail邮箱服务,实现两个邮箱之间的绑定(中)
    【日志】-2013.10.31
    21本计算机数学相关的免费电子书【转】
    WordPress搭建Personal Blog【转】
    一句话点亮你的人生
    【日志】-2013.10.28
    转载-smarty教程(基本语法)
  • 原文地址:https://www.cnblogs.com/guangmangchen/p/11412102.html
Copyright © 2011-2022 走看看