Étiquette : javascript

[Javascript] Rendre les variables et des fonctions déclarées dans des closures (publiques/privées) accessibles en-dehors de ces dernières

01/07/2022 / admin

Plusieurs sources pour cet article (car plusieurs techniques; à vous de choisir):

Avec le module pattern: How to avoid global variables in JavaScript?
Avec le Revealing module pattern
Avec window['varName'] = varName;: How to avoid global variables in JavaScript?
Un peu de culture générale sur les différentes façons de déclarer des variables en Javascript: Difference between variable declaration syntaxes in Javascript (including global variables)?

Avec le module pattern:

Je détaille celui-ci car il me plait bien 🙂 Mais voir également le Revealing module pattern juste en-dessous qui apporte quelques améliorations.

Variables et les fonctions privées: déclarées au sein d’une closure mais EN-DEHORS du scope du return
Variables et les fonctions publiques: déclarées au sein d’une closure mais DANS le scope du return

YAHOO.myProject.myModule = function () {

    //"private" variables:
    var myPrivateVar = "I can be accessed only from within YAHOO.myProject.myModule.";

    //"private" method:
    var myPrivateMethod = function () {
        YAHOO.log("I can be accessed only from within YAHOO.myProject.myModule");
    }

    return  {
        myPublicProperty: "I'm accessible as YAHOO.myProject.myModule.myPublicProperty."
        myPublicMethod: function () {
            YAHOO.log("I'm accessible as YAHOO.myProject.myModule.myPublicMethod.");

            //Within myProject, I can access "private" vars and methods:
            YAHOO.log(myPrivateVar);
            YAHOO.log(myPrivateMethod());

            //The native scope of myPublicMethod is myProject; we can
            //access public members using "this":
            YAHOO.log(this.myPublicProperty);
        }
    };

}(); // the parens here cause the anonymous function to execute and return

YAHOO.myProject.myModule = function () {

//"private" variables:

var myPrivateVar = "I can be accessed only from within YAHOO.myProject.myModule.";

//"private" method:

var myPrivateMethod = function () {

YAHOO.log("I can be accessed only from within YAHOO.myProject.myModule");

}

return {

myPublicProperty: "I'm accessible as YAHOO.myProject.myModule.myPublicProperty."

myPublicMethod: function () {

YAHOO.log("I'm accessible as YAHOO.myProject.myModule.myPublicMethod.");

//Within myProject, I can access "private" vars and methods:

YAHOO.log(myPrivateVar);

YAHOO.log(myPrivateMethod());

//The native scope of myPublicMethod is myProject; we can

//access public members using "this":

YAHOO.log(this.myPublicProperty);

}

};

}(); // the parens here cause the anonymous function to execute and return

Avec le Revealing module pattern

Avec le Revealing module pattern, toutes les variables et toutes les fonctions sont d’abord déclarées en privé et on se sert du return pour lister celles qu’on rend ensuite publiques. C’est plus lisible et plus pratique à l’utilisation.

var myModule = (function() {
  'use strict';

  var _privateProperty = 'Hello World';
  var publicProperty = 'I am a public property';

  function _privateMethod() {
    console.log(_privateProperty);
  }

  function publicMethod() {
    _privateMethod();
  }

  return {
    publicMethod: publicMethod,
    publicProperty: publicProperty
  };
})();

myModule.publicMethod(); // outputs 'Hello World'
console.log(myModule.publicProperty); // outputs 'I am a public property'
console.log(myModule._privateProperty); // is undefined protected by the module closure
myModule._privateMethod(); // is TypeError protected by the module closure

var myModule = (function() {

'use strict';

var _privateProperty = 'Hello World';

var publicProperty = 'I am a public property';

function _privateMethod() {

console.log(_privateProperty);

}

function publicMethod() {

_privateMethod();

}

return {

publicMethod: publicMethod,

publicProperty: publicProperty

};

})();

myModule.publicMethod(); // outputs 'Hello World'

console.log(myModule.publicProperty); // outputs 'I am a public property'

console.log(myModule._privateProperty); // is undefined protected by the module closure

myModule._privateMethod(); // is TypeError protected by the module closure

[JavaScript] Déléguer un événement à un élément du DOM créé dynamiquement (ou détecter l’événement click sur un SVG)

01/02/2022 / admin

ATTENTION: la méthode décrite dans ce billet fonctionne très bien pour deux choses bien distinctes:

déléguer un événement à un élément du DOM créé dynamiquement
détecter l’événement click sur un SVG

Néanmoins, dans le 1er cas et pour des raisons de performance, il serait plutôt conseillé de se tourner vers une solution d’event bubbling.

Source: Detecting click events on SVGs with vanilla JS event delegation – Listening for clicks inside an element.

<div id="combinationSummaryList">
    <a class="SelectionSummary-link">Lien présent dans le DOM au chargement de la page</a>
    <a class="SelectionSummary-link">Lien ajouté dynamiquement dans le DOM par une action utilisateur</a> <!-- la délégation d'événement sert pour cet élément -->
</div>

<a class="SelectionSummary-link">Lien présent dans le DOM au chargement de la page</a>

<a class="SelectionSummary-link">Lien ajouté dynamiquement dans le DOM par une action utilisateur</a>

</div>

const $_COMBINATION_SUMMARY_LIST = document.getElementById( 'combinationSummaryList' );

$_COMBINATION_SUMMARY_LIST.addEventListener('click',function( event ) {
    if ( !event.target.closest( '.SelectionSummary-link' ) ) return;
    event.preventDefault();
    // code à exécuter
}, false );

const $_COMBINATION_SUMMARY_LIST = document.getElementById( 'combinationSummaryList' );

$_COMBINATION_SUMMARY_LIST.addEventListener('click',function( event ) {

if ( !event.target.closest( '.SelectionSummary-link' ) ) return;

event.preventDefault();

// code à exécuter

}, false );

Javascript dans le cas d’un SVG:

$_COMBINATION_SUMMARY_LIST.addEventListener('click',function( event ) {
    if ( !event.target.closest( '.SelectionSummary-btnRemove' ) ) return;
        event.preventDefault();
        const $_REMOVE_BUTTON = event.target.closest( '.SelectionSummary-btnRemove' );
}, false );

$_COMBINATION_SUMMARY_LIST.addEventListener('click',function( event ) {

if ( !event.target.closest( '.SelectionSummary-btnRemove' ) ) return;

event.preventDefault();

const $_REMOVE_BUTTON = event.target.closest( '.SelectionSummary-btnRemove' );

}, false );

[Javascript] Envelopper du contenu existant dans un nouvel élément du DOM

11/01/2022 / admin

Source: Pure javascript method to wrap content in a div

function wrap(el, wrapper) {
    el.parentNode.insertBefore(wrapper, el);
    wrapper.appendChild(el);
}

// example: wrapping an element $_SUMMARY_CONTAINER into a new div element with class uk-offcanvas-bar
let $_OFFCANVAS_BAR = document.createElement( 'div' );
$_OFFCANVAS_BAR.className = "uk-offcanvas-bar";

wrap( $_SUMMARY_CONTAINER, $_OFFCANVAS_BAR );

function wrap(el, wrapper) {

el.parentNode.insertBefore(wrapper, el);

wrapper.appendChild(el);

}

// example: wrapping an element $_SUMMARY_CONTAINER into a new div element with class uk-offcanvas-bar

let $_OFFCANVAS_BAR = document.createElement( 'div' );

$_OFFCANVAS_BAR.className = "uk-offcanvas-bar";

wrap( $_SUMMARY_CONTAINER, $_OFFCANVAS_BAR );

[Javascript] Annuler la sélection d’un bouton radio

11/01/2022 / admin

Décocher un bouton radio sélectionné en cliquant dessus. Source: How to make a radio button unchecked by clicking it?

function deselectableRadios(rootElement) {
    if(!rootElement) rootElement = document;
    if(!window.radioChecked) window.radioChecked = {};
    window.radioClick = function(e) {
        const obj = e.target, name = obj.name || "unnamed";
        if(e.keyCode) return obj.checked = e.keyCode!=32;
        obj.checked = window.radioChecked[name] != obj;
        window.radioChecked[name] = obj.checked ? obj : null;
    }
    rootElement.querySelectorAll("input[type='radio']").forEach( radio => {
        radio.setAttribute("onclick", "radioClick(event)");
        radio.setAttribute("onkeyup", "radioClick(event)");
    });
}
deselectableRadios( $_IMPRINT_LIST );

function deselectableRadios(rootElement) {

if(!rootElement) rootElement = document;

if(!window.radioChecked) window.radioChecked = {};

window.radioClick = function(e) {

const obj = e.target, name = obj.name || "unnamed";

if(e.keyCode) return obj.checked = e.keyCode!=32;

obj.checked = window.radioChecked[name] != obj;

window.radioChecked[name] = obj.checked ? obj : null;

}

rootElement.querySelectorAll("input[type='radio']").forEach( radio => {

radio.setAttribute("onclick", "radioClick(event)");

radio.setAttribute("onkeyup", "radioClick(event)");

});

}

deselectableRadios( $_IMPRINT_LIST );

[Javascript] Accéder dynamiquement et via un chemin sous forme de chaîne de caractères à une information consignée dans un objet ou un tableau JS

11/01/2022 / admin

Source: DYNAMICALLY Accessing nested JavaScript objects and arrays by string path et un petit jsFiddle pour la route.

Object.byString = function(o, s) {
    s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
    s = s.replace(/^\./, '');           // strip a leading dot
    var a = s.split('.');
    for (var i = 0, n = a.length; i < n; ++i) {
        var k = a[i];
        if (k in o) {
            o = o[k];
        } else {
            return;
        }
    }
    return o;
}

Object.byString = function(o, s) {

s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties

s = s.replace(/^\./, ''); // strip a leading dot

var a = s.split('.');

for (var i = 0, n = a.length; i < n; ++i) {

var k = a[i];

if (k in o) {

o = o[k];

} else {

return;

}

return o;

}

const priceTable = {
    "<=4": {
        "size": [
            { "100": "5.11", "250": "4.62",  "500": "4.04", "1000": "3.81", "2000": "3.60" },
            { "100": "5.11", "250": "4.62",  "500": "4.04", "1000": "3.81", "2000": "3.60" },
            { "100": "5.11", "250": "4.62",  "500": "4.04", "1000": "3.81", "2000": "3.60" },
            { "100": "5.11", "250": "4.62",  "500": "4.04", "1000": "3.81", "2000": "3.60" },
            { "100": "5.11", "250": "4.62",  "500": "4.04", "1000": "3.81", "2000": "3.60" }, // <=4.size[4]['2000'] = 3.60
            { "100": "5.88", "250": "4.88",  "500": "4.88", "1000": "3.88", "2000": "3.88" }
        ]
    }
}

const combinedPath = buildPath( $_THIS ) + "." + matchingThreshold; // PAS interprété comme une chaîne de caractères
const targetValue = Object.byString( priceTable, combinedPath );  // interprété comme une chaîne de caractères (<=4.size[4]['2000'])

const priceTable = {

"<=4": {

"size": [

{ "100": "5.11", "250": "4.62", "500": "4.04", "1000": "3.81", "2000": "3.60" },

{ "100": "5.11", "250": "4.62", "500": "4.04", "1000": "3.81", "2000": "3.60" }, // <=4.size[4]['2000'] = 3.60

{ "100": "5.88", "250": "4.88", "500": "4.88", "1000": "3.88", "2000": "3.88" }

]

}

const combinedPath = buildPath( $_THIS ) + "." + matchingThreshold; // PAS interprété comme une chaîne de caractères

const targetValue = Object.byString( priceTable, combinedPath ); // interprété comme une chaîne de caractères (<=4.size[4]['2000'])

[UIKit v3] Mettre à jour les options d’un composant

11/01/2022 / admin

Source: Is it possible to update the options of a component?. ATTENTION: le code d’illustration donnée dans l’issue Git est FAUX! Mais il m’a mis sur la bonne piste. Reportez-vous au code ci-dessous:

//init accordion component with options
var accordion = UIkit.accordion(element, {collapse:true});

//change options on the fly
accordion.collapse = false;

//init accordion component with options

var accordion = UIkit.accordion(element, {collapse:true});

//change options on the fly

accordion.collapse = false;

[Javascript] Construire un chemin dynamique vers des valeurs de clés stockées dans un objet avec Object.byString

21/12/2021 / admin

Source: Accessing nested JavaScript objects and arrays by string path et demo.

Mon chemin dynamique était, par exemple, de ce type: const combinedPath = buildPath( $_THIS ) + "." + matchingThreshold;. Le problème venait du fait qu’il n’était pas interprété par javascript comme un chemin mais comme une chaîne de caractères (un console.log m’affichait quelque chose d’aplati du style: priceTable.<=2.size[0].100 au lieu de m’afficher la valeur stockée dans l’objet priceTable qui correspondait au chemin <=2.size[0].100).

Afin que le chemin construit dynamiquement via javascript ne soit pas interprété comme une chaîne de caractères, nous pouvons utiliser la fonction suivante:

Object.byString = function(o, s) {
    s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
    s = s.replace(/^\./, '');           // strip a leading dot
    var a = s.split('.');
    for (var i = 0, n = a.length; i < n; ++i) {
        var k = a[i];
        if (k in o) {
            o = o[k];
        } else {
            return;
        }
    }
    return o;
}

Object.byString = function(o, s) {

s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties

s = s.replace(/^\./, ''); // strip a leading dot

var a = s.split('.');

for (var i = 0, n = a.length; i < n; ++i) {

var k = a[i];

if (k in o) {

o = o[k];

} else {

return;

}

return o;

}

Utilisation:

Object.byString(someObj, 'part3[0].name');

1	Object.byString(someObj, 'part3[0].name');

[JavaScript] Exécuter une fonction seulement une fois

11/05/2021 / admin

Mise à jour: 09/12/2021

Un autre moyen suggéré dans le chapitre 15 Handling Events du livre Eloquent Javascript.

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>

let button = document.querySelector("button");

function once() {

console.log("Done.");

button.removeEventListener("click", once);

}

button.addEventListener("click", once);

</script>

js/utils.js:

const executeOnlyOnce = ( function( callbackFunction ) {
    let alreadyExecuted = false;
    return function( callbackFunction ) {
        if ( !alreadyExecuted ) {
            alreadyExecuted = true;

            // Execute only once!
            callbackFunction();
        }
    };
})();

export { executeOnlyOnce }

const executeOnlyOnce = ( function( callbackFunction ) {

let alreadyExecuted = false;

return function( callbackFunction ) {

if ( !alreadyExecuted ) {

alreadyExecuted = true;

// Execute only once!

callbackFunction();

}

};

})();

export { executeOnlyOnce }

import { executeOnlyOnce } from './js/utils';

let hadPreviousBreakpointChanges = false;
console.log( hadPreviousBreakpointChanges ); // "false"

const onBreakpointChange = function(){
    hadPreviousBreakpointChanges = true;
};

import { executeOnlyOnce } from './js/utils';

let hadPreviousBreakpointChanges = false;

console.log( hadPreviousBreakpointChanges ); // "false"

const onBreakpointChange = function(){

hadPreviousBreakpointChanges = true;

};

executeOnlyOnce(onBreakpointChange);
console.log(hadPreviousBreakpointChanges); // "true"

1 2	executeOnlyOnce(onBreakpointChange); console.log(hadPreviousBreakpointChanges); // "true"

[JavaScript] Mediaqueries et breakpoints en JS ES6+ avec la librairie breakpoint-helper

06/05/2021 / admin

Base de l’initialisation du helper

import bph from 'breakpoint-helper';

// UIkit v3.6.19 CSS breakpoints
// $breakpoint-small: 640px !default;
// $breakpoint-medium: 960px !default;
// $breakpoint-large: 1200px !default;
// $breakpoint-xlarge: 1600px !default;

const instance = bph({
    small: '640px',
    medium: '960px',
    large: '1200px',
    xlarge: '1600px',
});

import bph from 'breakpoint-helper';

// UIkit v3.6.19 CSS breakpoints

// $breakpoint-small: 640px !default;

// $breakpoint-medium: 960px !default;

// $breakpoint-large: 1200px !default;

// $breakpoint-xlarge: 1600px !default;

const instance = bph({

small: '640px',

medium: '960px',

large: '1200px',

xlarge: '1600px',

});

Utiliser la méthode `listen()` avec un breakpoint unique

(Mobile first!) On définit un breakpoint unique à (max-width: 1199px) au-delà duquel on exécute du code pour les Desktops.

La clé/name 'large' correspond à une largeur de 1200px. Le paramètre useMax permet l’ajout et le calcul de la valeur max-width.

const { listen } = instance;

const currentBreakpoint = listen(
    {
        name: 'large',
        useMax: true,
    },
    ({ matches }) => {
        if (matches) {
            // Execute code for Mobile devices
            console.log('Current breakpoint is: (max-width: 1199px)');
        } else {
            // Execute code for Desktop devices
            console.log('Current breakpoint is: (min-width: 1200px)');
        }
    }
);

const { listen } = instance;

const currentBreakpoint = listen(

{

name: 'large',

useMax: true,

({ matches }) => {

if (matches) {

// Execute code for Mobile devices

console.log('Current breakpoint is: (max-width: 1199px)');

} else {

// Execute code for Desktop devices

console.log('Current breakpoint is: (min-width: 1200px)');

}

);

Une autre solution si vous souhaitez une meilleure séparation du code exécuté par breakpoint

Cette solution alternative vous permet d’inclure du code pour nettoyer votre DOM dans le listener propre au breakpoint pour lequel vous initialisez également des choses.

const bpMobile = listen(
{
        name: 'large',
        useMax: true,
    },
    ({ matches }) => {
        if (matches) {
            // Initialiser
            console.log('EXECUTE code for: Mobile!');
        } else {
            // Nettoyer
            console.log('DESTROY code for: Mobile!');
        }
    }
);

const bpDesktop = listen('large', ({ matches }) => {
    if (matches) {
        // Initialiser
        console.log('EXECUTE code for: Desktop!');
    } else {
        // Nettoyer
        console.log('DESTROY code for: Desktop!');
    }
});

const bpMobile = listen(

{

name: 'large',

useMax: true,

({ matches }) => {

if (matches) {

// Initialiser

console.log('EXECUTE code for: Mobile!');

} else {

// Nettoyer

console.log('DESTROY code for: Mobile!');

}

);

const bpDesktop = listen('large', ({ matches }) => {

if (matches) {

// Initialiser

console.log('EXECUTE code for: Desktop!');

} else {

// Nettoyer

console.log('DESTROY code for: Desktop!');

}

});

[Webpack Encore] Optimiser vos bundles CSS avec PurgeCSS et JS et le tree shaking

03/05/2021 / admin

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:

Tree shaking (sur survivejs.com)

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:

// src/imports.js
export function testA() {
  console.log('Test A');
}

export function testB() {
  console.log('Test B');
}

// src/imports.js

export function testA() {

console.log('Test A');

}

export function testB() {

console.log('Test B');

}

// src/index.js (entry point)
import { testA } from './imports';

testA();

// 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:

/***/ "./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');
}

/***/ }),

/***/ "./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é:

!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:

[...]
;

// 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();

[...]

;

// 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.

Articles récents

Catégories

Archives

Méta

Étiquette : javascript

[Javascript] Rendre les variables et des fonctions déclarées dans des closures (publiques/privées) accessibles en-dehors de ces dernières

Avec le module pattern:

Avec le Revealing module pattern

[JavaScript] Déléguer un événement à un élément du DOM créé dynamiquement (ou détecter l’événement click sur un SVG)

Javascript dans le cas d’un SVG:

[Javascript] Envelopper du contenu existant dans un nouvel élément du DOM

[Javascript] Annuler la sélection d’un bouton radio

[Javascript] Accéder dynamiquement et via un chemin sous forme de chaîne de caractères à une information consignée dans un objet ou un tableau JS

[UIKit v3] Mettre à jour les options d’un composant

[Javascript] Construire un chemin dynamique vers des valeurs de clés stockées dans un objet avec Object.byString

[JavaScript] Exécuter une fonction seulement une fois

[JavaScript] Mediaqueries et breakpoints en JS ES6+ avec la librairie breakpoint-helper

Base de l’initialisation du helper

Utiliser la méthode `listen()` avec un breakpoint unique

Une autre solution si vous souhaitez une meilleure séparation du code exécuté par breakpoint

[Webpack Encore] Optimiser vos bundles CSS avec PurgeCSS et JS et le tree shaking

Utiliser PurgeCSS avec Webpack Encore

Le tree shaking avec Webpack Encore

Activer les commentaires `/* unused harmony export */` en développement avec le paramètre `config.optimization.usedExports = true;`

Avec le module pattern:

Avec le Revealing module pattern

Javascript dans le cas d’un SVG:

Base de l’initialisation du helper

Utiliser la méthode listen() avec un breakpoint unique

Une autre solution si vous souhaitez une meilleure séparation du code exécuté par breakpoint

Utiliser PurgeCSS avec Webpack Encore

Le tree shaking avec Webpack Encore

Activer les commentaires /* unused harmony export */ en développement avec le paramètre config.optimization.usedExports = true;

Utiliser la méthode `listen()` avec un breakpoint unique

Activer les commentaires `/* unused harmony export */` en développement avec le paramètre `config.optimization.usedExports = true;`