在此 Codelab 中，您将提升一个简单应用的性能，该应用可让用户对随机猫咪进行评分。了解如何通过最大限度地减少转译的代码量来优化 JavaScript 软件包。
在示例应用中，您可以选择一个字词或表情符号来表达您对每只猫咪的喜爱程度。点击按钮后，应用会在当前猫咪图片下方显示按钮的值。
测量
在添加任何优化之前，最好先检查网站：
- 如需预览网站，请按查看应用。然后按全屏
。 - 按 `Control+Shift+J`（在 Mac 上，按 `Command+Option+J`）打开开发者工具。
- 点击网络标签页。
- 选中停用缓存复选框。
- 重新加载应用。
此应用使用了超过 80 KB 的空间！现在，我们来了解一下如何找出 未使用的 bundle 部分：
按
Control+Shift+P（在 Mac 上，按Command+Shift+P）打开命令菜单。
输入
Show Coverage，然后按Enter键以显示覆盖率标签页。在覆盖率标签页中，点击重新加载，以便在捕获覆盖率的同时重新加载应用。
查看主 bundle 的代码使用量与加载量：
超过一半的 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 与 browserslist 集成，这意味着您可以在 browserlist 文档中找到可在此字段中使用的兼容查询的完整列表。
"last 2 versions" 值会针对每个浏览器的最后两个版本转译应用中的代码。
调试
如需全面了解浏览器的所有 Babel 目标以及包含的所有转换和 polyfill，请向 .babelrc: 添加 debug 字段
{
"presets": [
[
"@babel/preset-env",
{
"targets": "last 2 versions",
"debug": true
}
]
]
}
- 点击工具。
- 点击日志。
重新加载应用，然后查看编辑器底部的 Glitch 状态日志。
目标浏览器
Babel 会将有关编译过程的许多详细信息记录到控制台，包括代码已编译到的所有目标环境。
请注意，此列表中包含已停用的浏览器，例如 Internet Explorer。这会带来一个问题，因为不受支持的浏览器不会添加新功能，而 Babel 会继续为它们转译特定语法。如果用户不使用此浏览器访问您的网站，这会不必要地增加软件包的大小。
Babel 还会记录所用转换插件的列表：
这个列表相当长！这些是 Babel 需要使用的所有插件，用于将任何 ES2015+ 语法转换为所有目标浏览器的旧语法。
不过，Babel 不会显示所使用的任何特定 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：
虽然现在只包含 "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。
应用软件包大小显著减小。
缩小受支持浏览器的范围
包含的浏览器目标数量仍然相当多，并且没有多少用户使用已停用的浏览器（例如 Internet Explorer）。将配置更新为以下内容：
{
"presets": [
[
"@babel/preset-env",
{
"targets": "last 2 versions",
"targets": [">0.25%", "not ie 11"],
"debug": true,
"useBuiltIns": "usage",
}
]
]
}
查看提取的 bundle 的详细信息。
由于应用非常小，因此这些更改并没有太大区别。不过，建议您使用浏览器市场份额百分比（例如 ">0.25%"），并排除您确信用户不会使用的特定浏览器。如需了解详情，请参阅 James Kyle 撰写的“最后 2 个版本”被认为有害一文。
使用 <script type="module">
不过，仍有改进空间。虽然许多未使用的 polyfill 已被移除，但仍有许多 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
}
请注意，此处使用的是值为 false 的 esmodules，而不是 "@babel/preset-env" 的 targets 值。这意味着 Babel 包含所有必要的转换和 polyfill，以针对尚不支持 ES 模块的所有浏览器。
将 entry、cssRule 和 corePlugins 对象添加到 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>
最后需要做的是分别向模块和旧版脚本添加 module 和 nomodule 属性，在 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 脚本。虽然有解决方法和单独的插件（例如 BabelMultiTargetPlugin 和 HTMLWebpackMultiBuildPlugin）可以解决此问题，但本教程采用了一种更简单的方法，即手动添加模块脚本元素。
将以下代码添加到文件末尾的 src/index.js 中：
...
</form>
<script type="module" src="main.mjs"></script>
</body>
</html>
现在，在支持模块的浏览器（例如最新版本的 Chrome）中加载应用。
系统只会提取模块，由于模块基本上未经转译，因此软件包大小要小得多！另一个脚本元素会被浏览器完全忽略。
如果您在旧版浏览器上加载应用，则系统只会提取包含所有必要 polyfill 和转换的较大转译脚本。以下是在旧版 Chrome（版本 38）上发出的所有请求的屏幕截图。
总结
您现在了解了如何使用 @babel/preset-env 仅提供目标浏览器所需的必要 polyfill。您还了解了 JavaScript 模块如何通过提供两个不同的转译版本来进一步提升性能。在充分了解这两种技术如何显著缩减 bundle 大小后，您就可以开始优化了！