Dans cet article, je voudrais partager mon expérience dans le fractionnement de bundles pour un site de plusieurs pages à l'aide de Webpack 4. Tout d'abord, créez un point d'entrée pour chaque page. Prenons 4 pages comme exemple:
const path = require("path"); const PATHS = { src: path.resolve(process.cwd(), "src"), dist: path.resolve(process.cwd(), "dist") }; module.exports = { entry: { common: `${PATHS.src}/js/common`, index: `${PATHS.src}/js/index`, contacts: `${PATHS.src}/js/contacts`, about: `${PATHS.src}/js/about`, } }
Lors de l'assemblage, un bundle sera créé pour chaque page. Dans common point d'entrée common , j'ai mis des scripts communs pour toutes les pages. Pour connecter nos bundles aux pages, nous utiliserons le plugin Webpack HtmlWebpackPlugin .
Prenons un exemple:
module.exports = { ... plugins: [ new HtmlWebpackPlugin({ filename: `${PATHS.dist}/index.html`, template: `${PATHS.dist}/index.html`, chunks: ["index", "common"] }) ... ] ... };
En chunks précisons les bundles nécessaires à cette page (ordre: de droite à gauche). Ainsi, les premiers scripts seront connectés à la page, puis les scripts nécessaires séparément pour cette page.
Si nous avons des modules communs / bibliothèques tierces connectés sur différentes pages, nous créerons des ensembles communs pour ces pages.
Nous utiliserons le plugin Webpack SplitChunksPlugin . En fait, voici la configuration:
module.exports = { optimization: { splitChunks: { chunks: "all", minSize: 1, minChunks: 2 } } }
Après l'assemblage, nous recevrons des bundles séparément pour chaque page et des bundles qui partagent nos pages.
index.js contacts.js common.js about.js vendors~about-us~index.js vendors~about-us~contacts.js
Le bundle ~ about-us ~ index.js des fournisseurs contiendra des scripts communs pour about-us et index , qui sont mis en cache par le navigateur, et lorsque vous basculez de la page d' index vers about ils seront téléchargés par le navigateur et vous n'aurez qu'à télécharger le bundle about.js .
Les noms de morceaux peuvent être modifiés dans la configuration de ce plugin.
Pour connecter correctement ces bundles à chacune de nos pages, nous utiliserons HtmlWebpackPlugin. La configuration est la même qu'au début de l'article. Seulement maintenant, vous devez mettre la version alpha de ce plugin, car au moment de la rédaction, ce plugin ne connectait pas nos morceaux séparés, mais uniquement les points d'entrée connectés.
npm i --save-dev html-webpack-plugin@next
Après l'assemblage, nous obtenons le code suivant dans index.html:
<script src="js/common.js"></script> <script src="js/vendors~about-us~index.js"></script> <script src="js/index.js"></script>