How to reduce webpack bundle in development mode?

Question

I'm trying to create my own webpack configuration for a react / redux project. The configuration seems to work pretty well, but the bundle size is big (in development mode, I know how to reduce it in production mode)

My package.json looks like

  "dependencies": {
    "react": "15.4.2",
    "react-dom": "15.4.2",
    "react-hot-loader": "3.0.0-beta.6"
  },
  "devDependencies": {
    "babel-core": "6.24.0",
    "babel-loader": "6.4.1",
    "babel-preset-react": "6.23.0",
    "commitizen": "2.9.6",
    "cz-conventional-changelog": "2.0.0",
    "html-webpack-plugin": "2.28.0",
    "webpack": "2.3.1",
    "webpack-bundle-analyzer": "^2.3.1",
    "webpack-dev-server": "2.4.2"
  }

and my webpack configuration looks like

const webpack = require('webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const HtmlWebpackPlugin = require('html-webpack-plugin');

const project = require('./project.config')

const __DEV__ = project.globals.__DEV__;
const __PROD__ = project.globals.__PROD__;
const __TEST__ = project.globals.__TEST__;

const APP_ENTRIES = [project.paths.client('index.js')];

if (__DEV__) {
  APP_ENTRIES.unshift(
    'react-hot-loader/patch',
    `webpack-dev-server/client?http://${project.server_host}:${project.server_port}`,
    'webpack/hot/only-dev-server'
  )
}

const config = {
  devtool: project.compiler_devtool,

  entry: APP_ENTRIES,

  output: {
    path: project.paths.dist(),
    filename: `[name].[${project.compiler_hash_type}].js`,
    publicPath: project.compiler_public_path,
  },

  resolve: {
    modules: [
      project.paths.client(),
      'node_modules',
    ],
  },

  module: {
    rules: [{
      test: /\.js?$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
    }],
  },

  plugins: [
    new BundleAnalyzerPlugin(),
    new HtmlWebpackPlugin({
      template: project.paths.client('index.html'),
      hash: false,
      filename: 'index.html',
      inject: 'body',
    }),
  ],

  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  }
}

if (__DEV__) {
  config.plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin());
}

module.exports = config

Right now I got this output when I run webpack-dev-server

As you can see my bundle is bigger than 1.3 Mb but I'm only using a few libraries.

I tried to find out why is my bundle so big using webpack-bundle-analyser. Here is the result

It seems that react and readct-dom are the biggest libraries.

Is there a way to reduce the size of my bundle in development mode ??? Did I do something wrong ?

PS : I set compress = true in webpack-dev-server options, but it did not reduce the size of the bundle.

Here are more details about how I use webpack-dev-server

bin/start.js (I run it using node bin/start.js)

const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');

const config = require('../config/webpack.config');
const project = require('../config/project.config');

function runDevServer() {
  const devServer = new WebpackDevServer(webpack(config), {
    compress: true,
    hot: true,
    publicPath: project.compiler_public_path,
    stats: project.compiler_stats,
    watchOptions: {
      ignored: /node_modules/
    },
  });

  // Launch WebpackDevServer.
  devServer.listen(project.server_port, project.server_host, (err) => {
    if (err) {
      console.log('Webpack dev server encountered an error', err);
      return reject(err);
    }
    console.log(`Listening at ${project.server_host}:${project.server_port}`);
  });
}

runDevServer()

src/index.js (my application. Home is just a component returning "Hello world")

import React from 'react';
import ReactDOM from 'react-dom';

import { AppContainer } from 'react-hot-loader';

import Home from './routes';

const render = () => {
  try {
    ReactDOM.render(
      <AppContainer>
        <Home />
      </AppContainer>,
      document.getElementById('root')
    );
  } catch (err) {
    console.error(err)
  }
};

if (module.hot) {
  module.hot.accept('./routes', () => render());
}

render()

Bundle size in development mode is irrelevant unless the build time is too slow. Unminified code + source maps is big. — Andy Ray, Mar 25 '17 at 17:44
If you want you can make react and react-dom as external libraries. Doing so will make sure that these external libraries are not bundled and will be available at runtime. You can include them using ` — Hardik Modha, Mar 25 '17 at 18:05

score 4 · Answer 1 · edited May 23 '17 at 12:10

Having a large bundle during development is normal, 1.3MB is still small and should normally be fast to load. Since you are using webpack-dev-server, it should take no time to reload after each change. If you use compress = true, you bundle size will be the same, except that it will be gzip compressed when the client ask for it (you should see gzip in the network tab). I will recommend you not to try to reduce the size of the bundle for development because it will be hard to debug and slower to refresh. IF you really want to reduce the size, you can uglify and minify only the libraries code. This is a very common approach, you will basically have every library in a file named vendor.js that you will minify, uglify, etc. In another file, bundle.js you will have all the code you've wrote. This will reduce significantly the total size. but you will have to load 2 js files. You can also active the tree shaking for webpack 2. Her are more info about the tree shaking. You can refer to this answer on how to bundle vendor script separately and read more about code splitting here. But keep in mind that you dev bundle will always be of a bigger size because it is very handy when debugging.

How to reduce webpack bundle in development mode?

1 Answers1