向新型浏览器提供新式代码,以提高网页加载速度

在此 Codelab 中,我们将提高这个简单应用的性能,该应用允许用户为随机猫咪评分。了解如何通过尽量减少转译的代码量来优化 JavaScript 软件包。

应用屏幕截图

在示例应用中,您可以选择一个字词或表情符号来传达您对每只猫的喜爱程度。当您点击某个按钮时,应用会在当前猫咪图片下方显示该按钮的值。

测量

最好在添加任何优化措施之前先检查网站:

  1. 如需预览网站,请按查看应用,然后按全屏 全屏
  2. 按 `Control+Shift+J`(在 Mac 上,则按 `Command+Option+J`)打开开发者工具。
  3. 点击网络标签页。
  4. 选中停用缓存复选框。
  5. 重新加载应用。

原始软件包大小请求

此应用使用了超过 80 KB 的内容!此时应确认软件包的某些部分是否未被使用:

  1. Control+Shift+P(在 Mac 上,按 Command+Shift+P)打开 Command 菜单。 命令菜单

  2. 输入 Show Coverage 并按 Enter 以显示覆盖率标签页。

  3. 覆盖率标签页中,点击重新加载,在捕获覆盖率的同时重新加载应用。

    通过代码覆盖率重新加载应用

  4. 查看使用的代码量与主软件包的加载量:

    bundle 的代码覆盖率

该软件包中过半部分 (44 KB) 甚至未被使用。这是因为,其中的许多代码都由 polyfill 组成,以确保应用在旧版浏览器中正常运行。

使用 @babel/preset-env

JavaScript 语言的语法符合 ECMAScript(即 ECMA-262)标准。该规范的新版本每年都会发布,其中包含已通过提案流程的新功能。每种主要浏览器始终处于支持这些功能的不同阶段。

该应用使用了以下 ES2015 功能:

此外,还会使用以下 ES2017 功能:

请随时深入研究 src/index.js 中的源代码,了解所有相关代码的使用方式。

最新版 Chrome 支持所有这些功能,但如果其他不支持这些功能的浏览器,该怎么办?应用中包含的 Babel 是最常用的库,用于将包含更新语法的代码编译成旧版浏览器和环境可以理解的代码。它通过以下两种方式实现这一点:

  • 包含 Polyfill 用于模拟较新的 ES2015+ 函数,以便即使浏览器不支持其 API,也可使用它们。下面是 Array.includes 方法的 polyfill 示例。
  • 插件用于将 ES2015 代码(或更高版本)转换为旧版 ES5 语法。 由于这些是与语法相关的更改(例如箭头函数),因此无法使用 polyfill 模拟。

查看 package.json,查看包含哪些 Babel 库:

"dependencies": {
  "@babel/polyfill": "^7.0.0"
},
"devDependencies": {
  //...
  "babel-loader": "^8.0.2",
  "@babel/core": "^7.1.0",
  "@babel/preset-env": "^7.1.0",
  //...
}
  • @babel/core 是核心 Babel 编译器。这样,所有 Babel 配置都将在项目根目录下的 .babelrc 中定义。
  • babel-loader 在 webpack 构建流程中包含了 Babel。

现在,查看 webpack.config.js,了解如何将 babel-loader 作为规则包含在内:

module: {
  rules: [
    //...
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: "babel-loader"
    }
  ]
},
  • @babel/polyfill 可为任何较新的 ECMAScript 功能提供所有必要的 polyfill,使其可以在不支持这些功能的环境中运行。它已在 src/index.js. 的最顶部导入
import "./style.css";
import "@babel/polyfill";
  • @babel/preset-env 用于标识选择作为目标的任何浏览器或环境所需的转换和 polyfill。

查看 Babel 配置文件 .babelrc,了解其包含方式:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "last 2 versions"
      }
    ]
  ]
}

这是一个 Babel 和 webpack 设置。如果您碰巧使用的是与 webpack 不同的模块打包器,请了解如何在应用中添加 Babel

.babelrc 中的 targets 属性用于标识要定位的浏览器。@babel/preset-env 与 browserlist 集成,这意味着您可以在 browserlist 文档中找到可在此字段中使用的兼容查询的完整列表。

"last 2 versions" 值会针对每个浏览器的后两个版本转译应用中的代码。

调试

如需全面了解浏览器的所有 Babel 目标以及包含的所有转换和 polyfill,请向 .babelrc: 添加 debug 字段

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "last 2 versions",
        "debug": true
      }
    ]
  ]
}
  • 点击工具
  • 点击日志

重新加载应用并查看编辑器底部的 Glitch 状态日志。

定位的浏览器

Babel 会将关于编译过程的一些详细信息记录到控制台,包括针对这些目标环境编译代码。

定位的浏览器

请注意,此列表中列出了停止使用的浏览器,例如 Internet Explorer。这是一个问题,因为不受支持的浏览器不会添加较新的功能,而 Babel 会继续为这些浏览器转译特定的语法。如果用户并未使用此浏览器访问您的网站,这会不必要地增加 bundle 的大小。

Babel 还会记录一系列使用的转换插件:

使用的插件列表

这份清单有点长!这些是 Babel 需要使用的所有插件,才能针对所有目标浏览器将任何 ES2015+ 语法转换为旧版语法。

不过,Babel 不会显示所使用的任何特定 polyfill:

未添加任何 polyfill

这是因为整个 @babel/polyfill 是直接导入的。

逐个加载 polyfill

默认情况下,将 @babel/polyfill 导入文件时,Babel 包含完整 ES2015+ 环境所需的每个 polyfill。如需导入目标浏览器所需的特定 polyfill,请将 useBuiltIns: 'entry' 添加到配置中。

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "last 2 versions",
        "debug": true
        "useBuiltIns": "entry"
      }
    ]
  ]
}

重新加载应用。您现在可以看到包含的所有特定 polyfill:

导入的 polyfill 的列表

虽然现在仅包含 "last 2 versions" 所需的 polyfill,但仍然是一个超长的列表!这是因为,每个较新功能的目标浏览器仍然包含目标浏览器所需的 polyfill。将该属性的值更改为 usage,以便仅包含代码中使用的功能所需的属性。

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "last 2 versions",
        "debug": true,
        "useBuiltIns": "entry"
        "useBuiltIns": "usage"
      }
    ]
  ]
}

这样,polyfill 就会在需要时自动包含在内。这意味着,您可以移除 src/index.js. 中的 @babel/polyfill 导入项

import "./style.css";
import "@babel/polyfill";

现在,仅包含应用所需的 polyfill。

自动包含的 polyfill 列表

应用软件包大小大幅缩减。

软件包大小缩减至 30.1 KB

缩小受支持浏览器的列表范围

包含的浏览器目标数量仍然非常庞大,使用 Internet Explorer 等已停用浏览器的用户并不多。将配置更新为以下内容:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "last 2 versions",
        "targets": [">0.25%", "not ie 11"],
        "debug": true,
        "useBuiltIns": "usage",
      }
    ]
  ]
}

查看提取的 bundle 的详细信息。

软件包大小为 30.0 KB

由于应用非常小,因此这些更改实际上没有太大区别。不过,建议使用浏览器市场份额百分比(例如 ">0.25%"),同时排除您确信用户不会使用的特定浏览器。如需了解详情,请查看 James Kyle 撰写的“最后两个版本”被认为是有害一文。

使用 <script type="module">

仍有改进的空间。虽然移除了一些未使用的 polyfill,但仍然有很多 polyfill 是某些浏览器不需要的。通过使用模块,可以直接编写新语法并将其交付给浏览器,而无需使用任何不必要的 polyfill。

JavaScript 模块所有主流浏览器均支持的相对新功能。可以使用 type="module" 属性创建模块,以定义从其他模块导入和导出的脚本。例如:

// math.mjs
export const add = (x, y) => x + y;

<!-- index.html -->
<script type="module">
  import { add } from './math.mjs';

  add(5, 2); // 7
</script>

许多较新的 ECMAScript 功能在支持 JavaScript 模块(而不需要 Babel)的环境中已经受支持。这意味着您可以修改 Babel 配置,以便将应用的两个不同版本发送到浏览器:

  • 可以在支持模块的新版浏览器中使用,并且包含大部分未转译但文件大小较小的模块
  • 该版本包含更大的转译脚本,可在任何旧版浏览器中运行

将 ES 模块与 Babel

如需为应用的两个版本分别设置 @babel/preset-env 设置,请移除 .babelrc 文件。通过为每个版本的应用指定两种不同的编译格式,可以将 Babel 设置添加到 webpack 配置中。

首先,在 webpack.config.js 中添加旧版脚本的配置:

const legacyConfig = {
  entry,
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "[name].bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: [
            ["@babel/preset-env", {
              useBuiltIns: "usage",
              targets: {
                esmodules: false
              }
            }]
          ]
        }
      },
      cssRule
    ]
  },
  plugins
}

请注意,这里使用的不是 "@babel/preset-env"targets 值,而是值为 falseesmodules。这意味着 Babel 包含了所有必要的转换和 polyfill,用于定位尚不支持 ES 模块的每个浏览器。

entrycssRulecorePlugins 对象添加到 webpack.config.js 文件的开头。这些脚本在模块和提供给浏览器的旧版脚本之间共享。

const entry = {
  main: "./src"
};

const cssRule = {
  test: /\.css$/,
  use: ExtractTextPlugin.extract({
    fallback: "style-loader",
    use: "css-loader"
  })
};

const plugins = [
  new ExtractTextPlugin({filename: "[name].css", allChunks: true}),
  new HtmlWebpackPlugin({template: "./src/index.html"})
];

现在,类似地,为下方定义了 legacyConfig 的模块脚本创建一个配置对象:

const moduleConfig = {
  entry,
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "[name].mjs"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: [
            ["@babel/preset-env", {
              useBuiltIns: "usage",
              targets: {
                esmodules: true
              }
            }]
          ]
        }
      },
      cssRule
    ]
  },
  plugins
}

两者的主要区别在于输出文件名使用的是 .mjs 文件扩展名。此处的 esmodules 值设置为 true,这意味着输出到此模块的代码是较小且经过编译较少的脚本,在本示例中无需执行任何转换,因为使用的所有功能在支持模块的浏览器中都已经受支持。

在文件的最后,将两个配置导出到一个数组中。

module.exports = [
  legacyConfig, moduleConfig
];

现在,这既为支持它的浏览器构建了一个较小的模块,又为旧版浏览器构建了一个较大的转译脚本。

支持模块的浏览器会忽略具有 nomodule 属性的脚本。相反,不支持模块的浏览器会忽略带有 type="module" 的脚本元素。这意味着您可以添加一个模块以及一个已编译的回退。理想情况下,应用的两个版本应位于 index.html 中,如下所示:

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

支持模块的浏览器会提取并执行 main.mjs 并忽略 main.bundle.js.,不支持模块的浏览器则相反。

请务必注意,与常规脚本不同,模块脚本默认始终延迟。如果您希望等效的 nomodule 脚本也被延迟,并且仅在解析后执行,则需要添加 defer 属性:

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

在这里需要完成的最后一项操作是,将 modulenomodule 属性分别添加到模块和旧版脚本中,即导入 webpack.config.js 最顶部的 ScriptExtHtmlWebpackPlugin

const path = require("path");

const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ScriptExtHtmlWebpackPlugin = require("script-ext-html-webpack-plugin");

现在,更新配置中的 plugins 数组以包含此插件:

const plugins = [
  new ExtractTextPlugin({filename: "[name].css", allChunks: true}),
  new HtmlWebpackPlugin({template: "./src/index.html"}),
  new ScriptExtHtmlWebpackPlugin({
    module: /\.mjs$/,
    custom: [
      {
        test: /\.js$/,
        attribute: 'nomodule',
        value: ''
    },
    ]
  })
];

这些插件设置会为所有 .mjs 脚本元素添加一个 type="module" 属性,并会为所有 .js 脚本模块添加一个 nomodule 属性。

在 HTML 文档中提供模块

您需要做的最后一件事就是将旧版和现代脚本元素都输出到 HTML 文件中。遗憾的是,创建最终 HTML 文件 HTMLWebpackPlugin 的插件目前不支持模块和 nomodule 脚本的输出。尽管有解决方法和单独的插件(例如 BabelMultiTargetPluginHTMLWebpackMultiBuildPlugin)来解决此问题,但本教程中采用了一种手动添加模块脚本元素的更简单方法。

将以下代码添加到 src/index.js 文件末尾:

    ...
    </form>
    <script type="module" src="main.mjs"></script>
  </body>
</html>

现在,在支持模块的浏览器(例如最新版 Chrome)中加载应用。

新版浏览器通过网络提取的 5.2 KB 模块

系统只会提取该模块,由于模块未经过转译,因此软件包小得多!浏览器会完全忽略另一个脚本元素。

如果您在旧版浏览器上加载应用,则系统只会提取包含所有需要的 polyfill 和转换的较大转译脚本。以下是在旧版 Chrome(版本 38)中发出的所有请求的屏幕截图。

旧版浏览器抓取了 30 KB 脚本

总结

现在,您已了解如何使用 @babel/preset-env 仅提供目标浏览器所需的 polyfill。您还了解了 JavaScript 模块如何通过提供应用的两个不同转译版本来进一步提升性能。在充分了解这两种方法如何显著缩减软件包大小后,就可以着手进行优化了!