How else can i optimize my bundle and improve page speed?

Question

I have a react application where many library has been used like redux, redux-form, react-router, leaflet, react-bootstrap, redux-thunk and many more. My bundle size is minified to 531kb and vendor file to 5.32mb.

I have used webpack for bundling and optimization. Also i have used code splitting in webpack and react router. What else can be done for better performance in speed and as small size as possible. Does anyone has any idea to share?

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

const VENDOR_LIBS = [
  'react', 'lodash', 'axios', 'base-64', 'leaflet', 'leaflet-routing-machine',
  'moment', 'react-bootstrap', 'react-dates', 'react-dom', 'react-geosuggest',
  'react-google-places-suggest', 'react-input-range', 'react-intl', 'react-leaflet',
  'react-masonry-component', 'react-redux', 'react-router', 'react-router-redux',
  'react-slick', 'redux', 'redux-form', 'redux-thunk'
];

const config = {
  entry: {
    bundle: './src/index.js',
    vendor: VENDOR_LIBS,
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js',
  },
  module: {
    rules: [
      {
        loader: ExtractTextPlugin.extract({
          loader: 'css-loader'
        }),
        test: /\.css$/,
      },
      {
        use: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/,
      },
      {
        use: [
          {
            loader: 'url-loader',
            options: { limit: 40000 }
          },
          'image-webpack-loader'
        ],
        test: /\.(jpe?g|png|gif|svg|woff|woff2|eot|ttf)$/,
      },
      {
        test: /masonry|imagesloaded|fizzy\-ui\-utils|desandro\-|outlayer|get\-size|doc\-ready|eventie|eventemitter/, // eslint-disable-line
        loader: 'imports-loader?define=>false&this=>window'
    }
    ],
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'manifest']
    }),
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),
    new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    }),
    new ExtractTextPlugin('style.css'),
  ],
  devServer: {
    historyApiFallback: true,
    hot: true
  },
};

if (process.env.NODE_ENV === 'production') {
    config.plugins.push(
        new webpack.optimize.UglifyJsPlugin({
          output: {
            comments: false
          }
        })
    );
}

module.exports = config;

routes.js

const routes = {
  component: App,
  path: '/',
  childRoutes: [
    {
    component: HomeLayout,
    indexRoute: { component: Apartament },
    childRoutes: [
      {
        path: 'apartamentos',
        getComponent(location, cb) {
          System.import('./containers/homescreen/apartament-form')
             .then(module => cb(null, module.default));
        }
      },
      {
        path: 'signup',
        getComponent(location, cb) {
          System.import('./containers/homescreen/signup')
             .then(module => cb(null, module.default));
        }
      },
      {
        path: 'login',
        getComponent(location, cb) {
          System.import('./containers/homescreen/login')
             .then(module => cb(null, module.default));
        }
      }
    ],
  },
  {
  component: ResultLayout,
  childRoutes: [
    {
      path: 'car',
      getComponent(location, cb) {
        System.import('./containers/result/car-result')
        .then(module => cb(null, module.default));
      }
    },
  ]
}
  ]
};

Is there any other tips/idea like code splitting and shouldComponentUpdate?

Sorry for my bad English.

UPDATE after implementing @Tholle idea

enter image description here


Show source
| javascript   | reactjs   | optimization   | webpack   | webpack-2   2017-01-07 10:01 1 Answers

Answers to How else can i optimize my bundle and improve page speed? ( 1 )

  1. 2017-01-07 12:01

    You could use the NoErrorsPlugin and fine tune the options to HtmlWebpackPlugin and UglifyJsPlugin to make the bundles smaller:

    const config = {
      ...,
      plugins: [
        new webpack.optimize.CommonsChunkPlugin({
          names: ['vendor', 'manifest']
        }),
        new webpack.NoErrorsPlugin(),
        new HtmlWebpackPlugin({
          inject: true,
          template: 'src/index.html',
          minify: {
            removeComments: true,
            collapseWhitespace: true,
            removeRedundantAttributes: true,
            useShortDoctype: true,
            removeEmptyAttributes: true,
            removeStyleLinkTypeAttributes: true,
            keepClosingSlash: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true
          }
        }),
        new webpack.DefinePlugin({
          'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new ExtractTextPlugin('style.css')
      ]
    };
    
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(
        new webpack.optimize.UglifyJsPlugin({
          compress: {
            screw_ie8: true,
            warnings: false
          },
          mangle: {
            screw_ie8: true
          },
          output: {
            comments: false,
            screw_ie8: true
          }
        })
      );
    }
    

Leave a reply to - How else can i optimize my bundle and improve page speed?

◀ Go back