将现代代码提供给现代浏览器以加快页面加载速度

发布时间:2020-11-18 17:11:13 阅读:10
建立在所有主要浏览器上都能正常运行的网站是开放式网络生态系统的核心宗旨。但是,这意味着要进行额外的工作,以确保计划要定位的每个浏览器都支持你编写的所有代码。如果要使用新的 JavaScript 语言功能,则需要为尚不支持这些功能的浏览器将这些功能转换为向后兼容格式。

Babel 是使用最广泛的工具,用于将包含较新语法的代码编译为不同的浏览器和环境(例如 Node)可以理解的代码。本指南假定你正在使用 Babel,因此如果你尚未使用 Babel,则需要按照设置说明将其包含在应用程序中。选择webpackBuild Systems,如果你正在使用的 WebPack 为你的应用程序模块捆绑。

有趣的事实:Lebab 是一个独立的库,其功能与 Babel 相反。它将较旧的代码转换为较新的语法。

要使用 Babel 仅转换用户所需的内容,你需要:

  1. 确定要定位的浏览器。
  2. 使用@babel/preset-env适当的浏览器目标。
  3. 使用<script type="module">停止发送 transpiled 代码不需要它的浏览器。

确定要定位的浏览器

在开始修改应用程序中代码的编译方式之前,你需要确定哪些浏览器可以访问你的应用程序。分析你的用户当前正在使用哪些浏览器,以及你打算针对哪些浏览器做出明智的决定。

使用 @ babel /preset-env

编译代码通常会导致文件大于原始文件,而文件大小大于原始文件的大小。通过最大程度地减少编译量,可以减少捆绑软件的大小,从而提高网页的性能。

Babel 提供了许多将插件捆绑在一起的预设,而不是包括特定的插件来选择性地编译你正在使用的某些语言功能。使用 @ babel / preset-env 仅包含你计划定位的浏览器所需的转换和 polyfill。

@babel/preset-envpresets阵列中包含 Babel 配置文件.babelrc

{
 "presets": [
   [
     "@babel/preset-env",
     {
       "targets": ">0.25%"
     }
   ]
 ]
} 

使用该targets字段可通过向该字段添加适当的查询来指定要包括的浏览器版本browsers@babel/preset-env 与浏览器列表集成,这是一个在不同工具之间共享的开源配置,用于定位浏览器。兼容查询的完整列表在 browserslist 文档中。另一个选择是使用.browserslistrc文件列出你希望定位的环境。

">0.25%"值告诉 Babel 仅包含支持占全球使用量的 0.25%以上的浏览器所需的转换。这样可确保你的软件包中不包含用于极少数用户使用的浏览器的不必要的代码转换。

在大多数情况下,这是比使用以下配置更好的方法:

"targets": "last 2 versions" 

"last 2 versions"值将为每个浏览器的后两个版本转换代码 ,这意味着将为已停止使用的浏览器(例如 Internet Explorer)提供支持。如果你不希望使用这些浏览器来访问应用程序,则可能会不必要地增加捆绑软件的大小。

最终,你应该选择适当的查询组合,以仅定位满足你需求的浏览器。

启用现代的错误修复

@babel/preset-env将多个 JavaScript 语法功能分组到集合中,并根据指定的目标浏览器启用 / 禁用它们。尽管这很好用,但是当目标浏览器仅包含一个功能的错误时,将转换整个语法功能的集合。这通常会导致转换后的代码多于必要。

最初作为一个单独的预设中, 错误修正选项中@babel/preset-env 解决这个问题,通过将现代语法,在某些浏览器坏到最接近的等效语法未在这些浏览器打破。结果是几乎相同的现代代码,并进行了一些小的语法调整,以保证在所有目标浏览器中的兼容性。要使用此优化,请确保已@babel/preset-env安装 7.10 或更高版本,然后将该 bugfixes属性设置 为true

{
 "presets": [
   [
     "@babel/preset-env",
     {
       "bugfixes": true
     }
   ]
 ]
} 

在 Babel 8 中,bugfixes默认情况下将启用该选项。

使用<script type="module">

JavaScript 模块或 ES 模块是所有主要浏览器都支持的相对较新的功能 。你可以使用模块来创建可以从其他模块导入和导出的脚本,但是也可以将它们与@babel/preset-env仅用于支持它们的目标浏览器一起使用。

与其查询特定的浏览器版本或市场份额,不如"esmodules" : true.babelrc文件targets字段内指定。

{
   "presets":[
      [
         "@babel/preset-env",
         {
            "targets":{
               "esmodules": true
            }
         }
      ]
   ]
} 

在支持 JavaScript 模块的环境中,已经支持使用 Babel 编译的许多更新的 ECMAScript 功能。因此,通过这样做,你可以简化确保仅将转码的代码用于实际需要的浏览器的过程。

支持模块的浏览器将忽略具有nomodule属性的脚本。相反,不支持模块的浏览器会使用忽略脚本元素 type="module"。这意味着你可以包括一个模块以及一个编译后备。

理想情况下,应包含应用程序的两个版本脚本,如下所示:

 <script type="module" src="main.mjs"></script>
  <script nomodule src="compiled.js" defer></script> 

支持模块的浏览器将获取,执行main.mjs和忽略compiled.js。不支持模块的浏览器则相反。

默认情况下推迟模块脚本。该 defer 属性已添加到 nomodule 脚本中以实现相同的行为。

如果使用 webpack,则可以在配置中为应用程序的两个不同版本设置不同的目标:

  • 仅适用于支持模块的浏览器的版本。
  • 包含可在任何旧版浏览器中运行的已编译脚本的版本。由于转译需要支持更广泛的浏览器,因此文件大小更大。

尽管此 HTML 方法可以提供性能优势,但已发现某些浏览器在同时指定模块脚本和无模块脚本时会进行双重提取。杰森・米勒(Jason Miller)的《现代脚本加载》(Modern Script Loading)更详细地说明了这一点,并介绍了一些可用于规避此问题的选项。


我们在微信上24小时期待你的声音
解答:网站优化,网站建设,搜索引擎优化,APP 开发,小程序开发

非常感谢您有耐心的读完这篇文章:"将现代代码提供给现代浏览器以加快页面加载速度",此文章仅为提供更多信息供用户参考使用或为学习交流的方便。如果对您有帮助,请收藏我们的网址:https://www.91webs.cn


18617670560