Dans cet atelier de programmation, vous allez améliorer les performances de cette application simple qui permet aux utilisateurs d'évaluer des chats aléatoires. Découvrez comment optimiser le bundle JavaScript en minimisant la quantité de code transpilé.
Dans l'application exemple, vous pouvez sélectionner un mot ou un emoji pour indiquer à quel point vous aimez chaque chat. Lorsque vous cliquez sur un bouton, l'application affiche la valeur du bouton sous l'image du chat actuel.
Mesurer
Il est toujours judicieux de commencer par inspecter un site Web avant d'ajouter des optimisations:
- Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran .
- Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir DevTools.
- Cliquez sur l'onglet Réseau.
- Cochez la case Disable cache (Désactiver le cache).
- Actualisez l'application.
Plus de 80 ko sont utilisés pour cette application ! Il est temps de savoir si des parties du bundle ne sont pas utilisées:
Appuyez sur
Control+Shift+P
(ouCommand+Shift+P
sur Mac) pour ouvrir le menu Command (Commande).Saisissez
Show Coverage
, puis appuyez surEnter
pour afficher l'onglet Couverture.Dans l'onglet Couverture, cliquez sur Actualiser pour actualiser l'application pendant l'enregistrement de la couverture.
Examinez la quantité de code utilisée par rapport à la quantité chargée pour le bundle principal:
Plus de la moitié du bundle (44 Ko) n'est même pas utilisé. En effet, une grande partie du code est constituée de polyfills pour s'assurer que l'application fonctionne dans les anciens navigateurs.
Utiliser @babel/preset-env
La syntaxe du langage JavaScript est conforme à une norme appelée ECMAScript, ou ECMA-262. De nouvelles versions de la spécification sont publiées chaque année et incluent de nouvelles fonctionnalités qui ont passé le processus de proposition. Chaque navigateur majeur est toujours à un stade différent de la prise en charge de ces fonctionnalités.
Les fonctionnalités ES2015 suivantes sont utilisées dans l'application:
La fonctionnalité ES2017 suivante est également utilisée:
N'hésitez pas à examiner le code source dans src/index.js
pour voir comment tout cela est utilisé.
Toutes ces fonctionnalités sont compatibles avec la dernière version de Chrome, mais qu'en est-il des autres navigateurs qui ne les prennent pas en charge ? Babel, qui est inclus dans l'application, est la bibliothèque la plus populaire utilisée pour compiler du code contenant une syntaxe plus récente en code que les anciens navigateurs et environnements peuvent comprendre. Il le fait de deux manières:
- Les polyfills sont inclus pour émuler les fonctions ES2015 et versions ultérieures afin que leurs API puissent être utilisées même si elles ne sont pas compatibles avec le navigateur. Voici un exemple de polyfill de la méthode
Array.includes
. - Les plug-ins permettent de transformer le code ES2015 (ou version ultérieure) en syntaxe ES5 plus ancienne. Étant donné qu'il s'agit de modifications liées à la syntaxe (telles que les fonctions flèche), elles ne peuvent pas être émulées avec des polyfills.
Consultez package.json
pour voir quelles bibliothèques Babel sont incluses:
"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
est le compilateur principal de Babel. Toutes les configurations Babel sont définies dans un fichier.babelrc
à la racine du projet.babel-loader
inclut Babel dans le processus de compilation webpack.
Examinez maintenant webpack.config.js
pour voir comment babel-loader
est inclus en tant que règle:
module: { rules: [ //... { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ] },
@babel/polyfill
fournit tous les polyfills nécessaires pour toutes les fonctionnalités ECMAScript plus récentes afin qu'elles puissent fonctionner dans des environnements qui ne les prennent pas en charge. Il est déjà importé en haut desrc/index.js.
.
import "./style.css";
import "@babel/polyfill";
@babel/preset-env
identifie les transformations et les polyfills nécessaires pour tous les navigateurs ou environnements choisis comme cibles.
Consultez le fichier de configuration Babel, .babelrc
, pour voir comment il est inclus:
{
"presets": [
[
"@babel/preset-env",
{
"targets": "last 2 versions"
}
]
]
}
Il s'agit d'une configuration Babel et Webpack. Découvrez comment inclure Babel dans votre application si vous utilisez un outil de regroupement de modules autre que webpack.
L'attribut targets
dans .babelrc
identifie les navigateurs ciblés. @babel/preset-env
s'intègre à browserslist. Vous trouverez donc la liste complète des requêtes compatibles pouvant être utilisées dans ce champ dans la documentation browserslist.
La valeur "last 2 versions"
transpile le code de l'application pour les deux dernières versions de chaque navigateur.
Débogage
Pour obtenir un aperçu complet de toutes les cibles Babel du navigateur, ainsi que de toutes les transformations et polyfills inclus, ajoutez un champ debug
à .babelrc:
.
{
"presets": [
[
"@babel/preset-env",
{
"targets": "last 2 versions",
"debug": true
}
]
]
}
- Cliquez sur Outils.
- Cliquez sur Logs (Journaux).
Rechargez l'application et examinez les journaux d'état de Glitch en bas de l'éditeur.
Navigateurs ciblés
Babel consigne un certain nombre d'informations sur le processus de compilation dans la console, y compris tous les environnements cibles pour lesquels le code a été compilé.
Notez que les navigateurs abandonnés, tels qu'Internet Explorer, sont inclus dans cette liste. Cela pose problème, car les navigateurs non compatibles ne bénéficieront pas des nouvelles fonctionnalités, et Babel continuera de transcompiler une syntaxe spécifique pour eux. Cela augmente inutilement la taille de votre bundle si les utilisateurs n'utilisent pas ce navigateur pour accéder à votre site.
Babel consigne également une liste des plug-ins de transformation utilisés:
C'est une liste assez longue ! Il s'agit de tous les plug-ins que Babel doit utiliser pour transformer toute syntaxe ES2015 ou version ultérieure en syntaxe plus ancienne pour tous les navigateurs ciblés.
Toutefois, Babel n'affiche aucun polyfill spécifique utilisé:
En effet, l'ensemble de @babel/polyfill
est importé directement.
Charger les polyfills individuellement
Par défaut, Babel inclut tous les polyfills nécessaires à un environnement ES2015+ complet lorsque @babel/polyfill
est importé dans un fichier. Pour importer des polyfills spécifiques nécessaires aux navigateurs cibles, ajoutez un useBuiltIns: 'entry'
à la configuration.
{
"presets": [
[
"@babel/preset-env",
{
"targets": "last 2 versions",
"debug": true
"useBuiltIns": "entry"
}
]
]
}
Actualisez l'application. Vous pouvez désormais voir tous les polyfills spécifiques inclus:
Bien que seuls les polyfills nécessaires pour "last 2 versions"
soient désormais inclus, la liste reste très longue. En effet, les polyfills nécessaires aux navigateurs cibles pour chaque nouvelle fonctionnalité sont toujours inclus. Modifiez la valeur de l'attribut sur usage
pour n'inclure que celles qui sont nécessaires pour les éléments géographiques utilisés dans le code.
{
"presets": [
[
"@babel/preset-env",
{
"targets": "last 2 versions",
"debug": true,
"useBuiltIns": "entry"
"useBuiltIns": "usage"
}
]
]
}
Les polyfills sont ainsi automatiquement inclus si nécessaire.
Vous pouvez donc supprimer l'importation @babel/polyfill
dans src/index.js.
.
import "./style.css";
import "@babel/polyfill";
Seuls les polyfills nécessaires à l'application sont désormais inclus.
La taille du bundle d'application est considérablement réduite.
Étrécir la liste des navigateurs compatibles
Le nombre de cibles de navigateurs inclus est toujours assez important, et peu d'utilisateurs utilisent des navigateurs abandonnés tels qu'Internet Explorer. Remplacez les configurations par les valeurs suivantes:
{
"presets": [
[
"@babel/preset-env",
{
"targets": "last 2 versions",
"targets": [">0.25%", "not ie 11"],
"debug": true,
"useBuiltIns": "usage",
}
]
]
}
Consultez les détails du bundle extrait.
Étant donné que l'application est si petite, ces modifications n'ont pas vraiment d'incidence. Toutefois, nous vous recommandons d'utiliser un pourcentage de part de marché du navigateur (par exemple, ">0.25%"
) et d'exclure les navigateurs spécifiques que vous êtes sûr que vos utilisateurs n'utilisent pas. Pour en savoir plus, consultez l'article de James Kyle sur les deux dernières versions considérées comme dangereuses.
Utiliser <script type="module">
Des améliorations sont encore possibles. Bien qu'un certain nombre de polyfills inutilisés aient été supprimés, de nombreux polyfills sont fournis et ne sont pas nécessaires pour certains navigateurs. En utilisant des modules, vous pouvez écrire et envoyer directement une syntaxe plus récente aux navigateurs sans utiliser de polyfills inutiles.
Les modules JavaScript sont une fonctionnalité relativement récente compatible avec tous les principaux navigateurs.
Vous pouvez créer des modules à l'aide d'un attribut type="module"
pour définir des scripts qui importent et exportent à partir d'autres modules. Exemple :
// math.mjs
export const add = (x, y) => x + y;
<!-- index.html -->
<script type="module">
import { add } from './math.mjs';
add(5, 2); // 7
</script>
De nombreuses fonctionnalités ECMAScript plus récentes sont déjà compatibles avec les environnements compatibles avec les modules JavaScript (au lieu d'avoir besoin de Babel). Cela signifie que la configuration Babel peut être modifiée pour envoyer deux versions différentes de votre application au navigateur:
- Version compatible avec les navigateurs plus récents qui prennent en charge les modules et qui inclut un module largement non transpilé, mais dont la taille de fichier est plus petite
- Version incluant un script transcompilé plus volumineux qui fonctionne dans n'importe quel ancien navigateur
Utiliser des modules ES avec Babel
Pour avoir des paramètres @babel/preset-env
distincts pour les deux versions de l'application, supprimez le fichier .babelrc
. Vous pouvez ajouter des paramètres Babel à la configuration webpack en spécifiant deux formats de compilation différents pour chaque version de l'application.
Commencez par ajouter une configuration pour l'ancien script à 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
}
Notez qu'au lieu d'utiliser la valeur targets
pour "@babel/preset-env"
, esmodules
avec une valeur de false
est utilisé à la place. Cela signifie que Babel inclut toutes les transformations et polyfills nécessaires pour cibler tous les navigateurs qui ne sont pas encore compatibles avec les modules ES.
Ajoutez des objets entry
, cssRule
et corePlugins
au début du fichier webpack.config.js
. Ils sont tous partagés entre le module et les anciens scripts diffusés dans le navigateur.
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"})
];
De même, créez un objet de configuration pour le script de module ci-dessous, où legacyConfig
est défini:
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
}
La principale différence ici est qu'une extension de fichier .mjs
est utilisée pour le nom de fichier de sortie. La valeur esmodules
est définie sur "true" ici, ce qui signifie que le code généré dans ce module est un script plus petit et moins compilé qui ne subit aucune transformation dans cet exemple, car toutes les fonctionnalités utilisées sont déjà compatibles avec les navigateurs compatibles avec les modules.
À la toute fin du fichier, exportez les deux configurations dans un seul tableau.
module.exports = [
legacyConfig, moduleConfig
];
Cela permet de créer à la fois un module plus petit pour les navigateurs compatibles et un script transpilé plus volumineux pour les navigateurs plus anciens.
Les navigateurs compatibles avec les modules ignorent les scripts avec un attribut nomodule
.
À l'inverse, les navigateurs qui ne sont pas compatibles avec les modules ignorent les éléments de script avec type="module"
. Cela signifie que vous pouvez inclure un module ainsi qu'un remplacement compilé. Dans l'idéal, les deux versions de l'application doivent se trouver dans index.html
comme suit:
<script type="module" src="main.mjs"></script>
<script nomodule src="main.bundle.js"></script>
Les navigateurs compatibles avec les modules récupèrent et exécutent main.mjs
et ignorent main.bundle.js.
. Les navigateurs non compatibles avec les modules font le contraire.
Il est important de noter que, contrairement aux scripts standards, les scripts de module sont toujours différés par défaut.
Si vous souhaitez que le script nomodule
équivalent soit également différé et exécuté uniquement après l'analyse, vous devez ajouter l'attribut defer
:
<script type="module" src="main.mjs"></script>
<script nomodule src="main.bundle.js" defer></script>
La dernière chose à faire ici est d'ajouter les attributs module
et nomodule
au module et à l'ancien script, respectivement. Importez le ScriptExtHtmlWebpackPlugin en haut de webpack.config.js
:
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ScriptExtHtmlWebpackPlugin = require("script-ext-html-webpack-plugin");
Mettez à jour le tableau plugins
dans les configurations pour inclure ce plug-in:
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: '' }, ] }) ];
Ces paramètres de plug-in ajoutent un attribut type="module"
pour tous les éléments de script .mjs
, ainsi qu'un attribut nomodule
pour tous les modules de script .js
.
Déployer des modules dans le document HTML
La dernière chose à faire est d'afficher les éléments de script anciens et modernes dans le fichier HTML. Malheureusement, le plug-in qui crée le fichier HTML final, HTMLWebpackPlugin
, n'est actuellement pas compatible avec la sortie des scripts module et nomodule. Bien qu'il existe des solutions de contournement et des plug-ins distincts créés pour résoudre ce problème, tels que BabelMultiTargetPlugin et HTMLWebpackMultiBuildPlugin, une approche plus simple consistant à ajouter manuellement l'élément de script de module est utilisée dans le cadre de ce tutoriel.
Ajoutez ce qui suit à src/index.js
à la fin du fichier:
...
</form>
<script type="module" src="main.mjs"></script>
</body>
</html>
Chargez maintenant l'application dans un navigateur compatible avec les modules, comme la dernière version de Chrome.
Seul le module est extrait, avec une taille de bundle beaucoup plus petite, car il n'est presque pas transpilé. L'autre élément de script est complètement ignoré par le navigateur.
Si vous chargez l'application sur un ancien navigateur, seul le script transcompilé plus volumineux avec tous les polyfills et transformations nécessaires est extrait. Voici une capture d'écran de toutes les requêtes effectuées sur une ancienne version de Chrome (version 38).
Conclusion
Vous savez maintenant comment utiliser @babel/preset-env
pour ne fournir que les polyfills nécessaires aux navigateurs ciblés. Vous savez également comment les modules JavaScript peuvent améliorer les performances en fournissant deux versions transpilées différentes d'une application. Maintenant que vous savez comment ces deux techniques peuvent réduire considérablement la taille de votre bundle, lancez-vous et optimisez-le !