web-dev-qa-db-fra.com

Comment configurer terserplugin pour ne pas modifier les noms de classe

Les noms de classe sont mutilés pendant la minification, mais cela ne devrait pas être fait

J'ai essayé de définir la propriété réservée lors de la modification, comme décrit ici https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions . Malheureusement, cela ne fonctionne pas pour moi.

J'ai un dépôt sur bitbucket qui contient le problème, https://bitbucket.org/JohanBeumer/angular-ivy-aot/src/master/ .

J'ai remarqué que j'avais fait une erreur en ne validant pas les dernières sources sur bitbucket. Désolé pour cela, j'ai mis à jour le dépôt.

La configuration de webpack personnalisée que j'utilise dans ce dépôt est la suivante:


module.exports = {
    optimization: {
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
                    compress: false,
                    keep_fnames: true,
                    keep_classnames: true,
                    mangle: {
                        keep_fnames: true,
                        keep_classnames: true,
                        properties: {
                            reserved: ['Foo', 'BaseModel']
                        }
                    }
                }
            })
        ]
    }
};

Je m'attends à ce que le titre de l'écran affiche le nom de la classe, qui est "Foo".

Je crée l'application en utilisant la commande: ng build --prod --aot

La vraie question que je me pose est la suivante: comment empêcher Webpack Minify de modifier le nom de classe?

Merci pour la réponse Tony Ngo. J'ai ajouté keep_fnames comme vous l'avez suggéré mais malheureusement cela ne résout pas le problème. Maintenant, j'obtiens l'erreur suivante dans la console:

Console error

angularwebpackterser
8
Johan Beumer

Juste pour terminer cette question. J'ai fini par créer un problème avec Webpack au début et plus tard avec Angular-cli.

problème Webpack

problème Angular-cli

La leçon à retenir est que vous pouvez configurer terserPlugin, mais Angular ignore cette configuration quand il s'agit de mangling.

Pour vous faire gagner du temps, au lieu d'essayer dynamiquement d'obtenir le nom de classe, ajoutez une propriété avec ce même nom et utilisez-la.

1
Johan Beumer