How to minimize my css files using webpack

Question

i'm using webpack and would like to minimize css file. At this time it is 2.25MB. I found this optimize-css-assets-webpack-plugin plugin but it din't help and my css file is same size. Here is my settings

'use strict';    
const webpack = require('webpack');
const merge = require('webpack-merge');
const webpackCommon = require('./webpack-common.config');
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = merge(webpackCommon, {
   devtool: 'none',
   plugins: [
      new webpack.optimize.OccurrenceOrderPlugin(),
      new webpack.optimize.AggressiveMergingPlugin(),
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.UglifyJsPlugin({
         /\.js$/,
         beautify: false,
         comments: false,
         compress: {
            unused: true,
            dead_code: true,
            warnings: false,
            screw_ie8: true
         }
      }),
      new webpack.NoErrorsPlugin(),
      new webpack.DefinePlugin({
         'process.env.NODE_ENV': JSON.stringify('production'),
         '__DEV__': false
      }),
      new webpack.optimize.CommonsChunkPlugin({
         minChunks: 2,
         maxChunks: 15,
         minChunkSize: 10000,
         name: 'vendor'
      }),
      new OptimizeCssAssetsPlugin({
         assetNameRegExp: /\.scss$/g,
         cssProcessor: require('cssnano'),
         cssProcessorOptions: { discardComments: { removeAll: true } },
         canPrint: true
      })
   ]
});

this is prod config and it requires common config file. Here it is

'use strict';

const path = require('path')
const webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
   entry: {
      main: './src/main.js',
   },
   output: {
      filename: '[name].js',
      path: path.resolve(__dirname, '../../PashaGraph/WebClient/public')
   },
   watch: true,
   watchOptions: {
      aggregateTimeout: 100
   },
   plugins: [
      new ExtractTextPlugin("[name].css")
   ],
   module: {
      loaders: [
         {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel'
         },
         {
            test: /\.scss$/,
            loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass?sourceMap')
         },
         {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract('style', 'css-loader?minimize!sourceMap')
         },
         {
            test: /\.woff2?$|\.ttf$|\.eot$|\.svg$|\.png|\.jpe?g|\.gif$/,
            exclude: /node_modules/,
            loader: 'url-loader'
         }
      ]
   },
   resolve: {
      extensions: ['', '.js', '.jsx']
   }
};

as u see i use sass in my app. Maybe this is a reason why it doesn't reduce size.

Solved! actually i have fonts and they were converted and embedded into css file. Thats why it was such big event with compression (2.25mb). By the way i found this solution to restrict maximal size for embedding

{
            test: /\.woff2?$|\.ttf$|\.eot$|\.svg$|\.png|\.jpe?g|\.gif$/,
            exclude: /node_modules/,
            loader: "url-loader?limit=60&name=fonts/[name]_[hash].[ext]"
         }

Ravi Roshan · Accepted Answer · 2016-12-25 04:36:22Z

1

Just run the webpack with -p option. It will build for production with very high compression.

webpack -p

Also, you may need to set the Node_Environment to production else the final build will give some warning message in the browser's console.

answered Dec 25, 2016 at 4:36

Ravi Roshan

1,2072 gold badges13 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pavel Poberezhnyi Over a year ago

Thanks for solution. I have also found my own solution and update question with it

Vreshch Volodymyr · Accepted Answer · 2017-08-11 23:52:21Z

1

You can also minify css classnames - that can give up to 40% in bundle size reduction. https://github.com/vreshch/optimize-css-classnames-plugin

answered Aug 11, 2017 at 23:52

Vreshch Volodymyr

192 bronze badges

2 Comments

Pavel Poberezhnyi Over a year ago

nice solution! Ths

dimson d Over a year ago

how this plugin works with classes from js libs if related css placed inside index.html?

Andy Ray · Accepted Answer · 2016-12-10 18:10:34Z

0

Don't use source maps in production code. Remove !sourceMap.

answered Dec 10, 2016 at 18:10

Andy Ray

32.3k16 gold badges114 silver badges151 bronze badges

1 Comment

Pavel Poberezhnyi Over a year ago

thanks, i did it but my bundle.css file still is same size

Collectives™ on Stack Overflow

How to minimize my css files using webpack

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related