web-dev-qa-db-fra.com

webpack 4 uglifyjs ne réduit pas et ne comprime pas

J'utilise webpack 4 et je ne sais pas si mon code est compressé et minifié. J'utilise également React.

Mon premier problème est d'utiliser le plugin Webpack UglifyJS dans la propriété webpack plugin ou la propriété optimization. Lorsque j'utilise la propriété plugin, elle semble compresser au moins mais pas sur une seule ligne. Je ne sais toujours pas si cela diminue. Lorsque j'utilise optimization, il ne compresse même pas. Quand je regarde mon fichier js groupé, il semble regrouper des choses dans node_modules comme webpack.

// fonctionne avec plugin

module.exports = {
    ...
    plugins: [new UglifyJsPlugin({
        test: /\.js$/,
        exclude: /node_modules/,
        sourceMap: true,
        uglifyOptions: {
            compress: {},
            mangle: true,
        }
}],

// ne fonctionne pas avec optimization

module.exports = {
    ...
    optimization: {
        minimize: true,
        minimizer: [new UglifyJsPlugin({
            test: /\.js$/,
            exclude: /node_modules/,
            sourceMap: true,
            uglifyOptions: {
                compress: {},
                mangle: true,
             }
       }],
    }

Avec le premier exemple, le code est compressé au moins mais pas en une seule ligne.

//Exemple

!*** ./node_modules/scheduler/index.js ***!
  \*****************************************/
/*! no static exports found */function(module,exports,__webpack_require__){"use strict";eval('\n\nif (false) {} else {\n...

 !*** ./node_modules/scheduler/tracing.js ***!
  \*******************************************/
/*! no static exports found */function(module,exports,__webpack_require__){"use strict";eval('\n\nif (false) {...

Je ne sais pas non plus s'il est minifié. J'ai écrit une fonction dans mon composant React

someFunc(one, two) {
    return one + two
}

Selon les documents npm uglifyjs, cela devrait être réduit en

someFunc(a, b) { \n return a+b\n}

mais il est produit en tant que

someFunc(one, two) { \n return one + two\n}

Est-ce que c'est minifiant?

javascriptreactjswebpackuglifyjs
3
henhen

Webpack 4 effectue l'optimisation et la minification par défaut en mode production.

Donc, si ma supposition est bonne, votre configuration est la configuration development.

Vous pouvez supprimer votre définition explicite d'UglifyJsPlugin et définir mode sur production et Webpack se chargera de tout.

mode: 'production',
plugins: [...],
optimization: ...

Vous pouvez cependant personnaliser vos optimisations. Mais définir le mode sur production vous donnera les résultats attendus.

Plus d'infos ici

tilisation du mode Webpack 4

8
Dinesh Pandiyan

J'étais également confronté au même problème. Il a commencé à fonctionner après avoir fourni une valeur de configuration de mode en tant que production.

module.exports = {
    // webpack config
    mode: process.env.NODE_ENV || 'development',
};

// command NODE_ENV=production webpack
1
Rakesh Rawat