Testé fonctionnel Webpack Encore v1.1.2 (tournant sous Webpack v5.34.0).
Utiliser PurgeCSS avec Webpack Encore
Source: blog de PHP Roberto – Integrating Purgecss with Symfony Encore (version PDF: phproberto.com-Integrating Purgecss with Symfony Encore).
Le tree shaking avec Webpack Encore
Quelques ressources en ligne:
Oui, le tree shaking est activé par défaut en mode « production » dans Webpack Encore. C’est juste que la documentation officielle sur symfony.com oublie de le mentionner (grrr…)!
Vous pouvez effectuer le test qui est décrit ici (aka « le tree shaking dans Webpack Encore expliqué en 30 secondes ») pour vous en assurer.
Pour exemple, si vous avez les deux fichiers suivants:
|
1 2 3 4 5 6 7 8 |
// src/imports.js export function testA() { console.log('Test A'); } export function testB() { console.log('Test B'); } |
|
1 2 3 4 |
// src/index.js (entry point) import { testA } from './imports'; testA(); |
Exécuter la commande yarn encore dev devrait générer quelque chose de similaire à ceci:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/***/ "./src/imports.js": /*!************************!*\ !*** ./src/imports.js ***! \************************/ /*! exports provided: testA, testB */ /*! exports used: testA */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; /* harmony export (immutable) */ __webpack_exports__["a"] = testA; /* unused harmony export testB */ function testA() { console.log('Test A'); } function testB() { console.log('Test B'); } /***/ }), |
Cependant, en exécutant la commande yarn encore production le commentaire /* unused harmony export testB */ présent avec la précédente commande sera pris en compte par UglifyJs qui va en conséquence supprimer l’export en relation lors de la phase de minification. Dans ce cas, on ne devrait pas retrouver la chaîne de caractère « Test B » dans le fichier généré:
|
1 |
!function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/",t(t.s="lVK7")}({dxJD:function(e,t,n){"use strict";function r(){console.log("Test A")}t.a=r},lVK7:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n("dxJD");Object(r.a)()}}); |
Activer les commentaires /* unused harmony export */ en développement avec le paramètre config.optimization.usedExports = true;
Ceci vous permettra de vérifier avec du code humainement lisible quels sont les parties de votre code qui ne sont pas exploitées et qui seront supprimées dans le bundle minifié de production.
Tout à la fin de votre fichier webpack.config.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
[...] ; // fetch the config, then modify it! const config = Encore.getWebpackConfig(); config.optimization.usedExports = true; // export the final config module.exports = config; // was: // module.exports = Encore.getWebpackConfig(); |
Vous pouvez tout-à-fait laisser cette config activée. Elle ne portera pas préjudice au poids final de votre build de production.