Strip comments

Although I am using the UglifyJS plugin and have options turned on, I still get some comments in the code like /*! ... */. I want to strip my entire output of any comment. How can I do that?

Kind regards, Ingwie.

Author: Fantashit

11 thoughts on “Strip comments

  1. I’m still getting comments in my bundle. Can anyone help me out?

    uglifyjs options:

    plugins: [
        new Webpack.optimize.UglifyJsPlugin({
          compress: {
            sequences: true,
            dead_code: true,
            conditionals: true,
            booleans: true,
            unused: true,
            if_return: true,
            join_vars: true,
            drop_console: true
          },
          mangle: {
            except: ['$super', '$', 'exports', 'require']
          },
          output: {
            comments: false
          } 
        })
      ]
    

    Command I’m running:

    set NODE_ENV=production & webpack -p --optimize-minimize --optimize-dedupe --config webpack.production.config.js
    
  2. I get them stripped now. This is my config for Uglifyjs. The only place where comments are left, is CSS.

    module.exports = {
        compress: {
            warnings: false,
            properties: true,
            sequences: true,
            dead_code: true,
            conditionals: true,
            comparisons: true,
            evaluate: true,
            booleans: true,
            unused: true,
            loops: true,
            hoist_funs: true,
            cascade: true,
            if_return: true,
            join_vars: true,
            //drop_console: true,
            drop_debugger: true,
            unsafe: true,
            hoist_vars: true,
            negate_iife: true,
            //side_effects: true
        },
        //sourceMap: true,
        mangle: {
            toplevel: true,
            sort: true,
            eval: true,
            properties: true
        },
        output: {
            space_colon: false,
            comments: function(node, comment) {
                var text = comment.value;
                var type = comment.type;
                if (type == "comment2") {
                    // multiline comment
                    return /@copyright/i.test(text);
                }
            }
        }
    }

    Notice the function there – that does the trick. It only leaves comments with @copyright in. All others are goners.

  3. I ended up using this config. Seems to get me the smallest build file.

    {
      debug: false,
      sourceMap: false,
      entry: ...,
      output: {...},
      resolve: {...},
      module: {...},
      plugins: [
        new Webpack.optimize.DedupePlugin(),
        new Webpack.optimize.AggressiveMergingPlugin(),
        new Webpack.optimize.UglifyJsPlugin({
          sourceMap: false,
          compress: {
            sequences: true,
            dead_code: true,
            conditionals: true,
            booleans: true,
            unused: true,
            if_return: true,
            join_vars: true,
            drop_console: true
          },
          mangle: {
            except: ['$super', '$', 'exports', 'require']
          },
          output: {
            comments: false
          } 
        })
      ]
    }
    

    Where “…” are irrelevant settings.

    @IngwiePhoenix ‘s solution seems good but I haven’t tried it yet so I can’t vouch for it 🙂

    And I’m using this command to run this (Windows):

    set NODE_ENV=production && webpack --config webpack.production.config.js
    
  4. +1

    @sokra
    I am using the following uglifyjs options:

    new webpack.optimize.UglifyJsPlugin({
        compress: { warnings: false },
        comments: false,
        sourceMap: false
    })
    

    I get no comments in JS bundle, BUT still /*! xxxx */ in CSS.
    How can I strip these comments in CSS files? Is there any workaround?

  5. Update snippet from @viko16 :

    loaders: [{
      test: /\.css$/,
      loader: ExtractTextPlugin.extract('style-loader', 'css-loader?' + JSON.stringify({ minimize: { discardComments: { removeAll: true } } })
    }]
  6. I use this for CSS:

    {
      test: /\.s?css$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          {
            loader: 'css-loader',
            options: {
              minimize: { discardComments: { removeAll: true } }
            }
          },
          'sass-loader'
        ]
      })
    }

    And this for JS:

    plugins: [
      // ...
      new webpack.optimize.UglifyJsPlugin({
        beautify: false,
        mangle: {
          screw_ie8: true,
          keep_fnames: false
        },
        compress: {
          screw_ie8: true
        },
        comments: false
      }),
      // ...
    ]
  7. If anyones using typescript you can set removeComments in the tsconfig.json to true and that’ll remove all the comments from your produced code. Hope this helps someone as a quick workaround.

  8. They switched from uglifyjs-webpack-plugin to terser-webpack-plugin. So if you don’t want any additional dependencies to your package.json, you may just use default terser-webpack-plugin:

    const TerserPlugin = require('terser-webpack-plugin');
    
    module.exports = {
      entry: /*...*/
      output: /*...*/,
      module: /*...*/,
      optimization: {
        minimizer: [
          new TerserPlugin({
            terserOptions: {
              output: {
                comments: false,
              },
            },
          }),
        ],
      },
    }

    Works for me.

  9. im using Webpack 4 and the problem with .js files was fixed by adding UglifyjsWebpackPlugin, but the problem with .css (.scss) file was not fixed even after i tried all of the solutions above.
    After 2 hours of struggling with configuration and different plugins, i realized that my problem was about Webpack build caching. the css generated files were cached and the output css was not affected by changes to Webpack configuration and plugins.
    So i first disabled the cache and then after following the official docs about minimizing css for production, and installing Optimize CSS Assets Plugin and also adding it to Webpack plugins array (which was not covered in Webpack official doc, but was described in the plugin documentation example), my problem was fixed and there were not comments both in css and js.

    Here is my Webpack configuration (some parts removed, for the sake of brevity):

    const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
    const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
    
    
    module.exports = {
      /*
      * other configurations
      */,
    
      optimization: {
        minimizer: [
          new TerserJSPlugin({}), // do not forget to add this. it's Webpack's default.
          new OptimizeCSSAssetsPlugin({
            cssProcessorPluginOptions: {
              preset: ['default', { discardComments: { removeAll: true } }],
            },
          })
        ],
      },
    
      /*
      * other configurations
      */,
    
      plugins: [
    
      /* other plugins */,
    
      new OptimizeCSSAssetsPlugin({
        cssProcessorPluginOptions: {
          preset: ['default', { discardComments: { removeAll: true } }],
        },
      }),
    
      /* other plugins */,
    
      ]
    }

    Sorry for my bad English, i hope it helps 🙂

Comments are closed.