Webpack builds large production file

Question

I don't know why but my webpack config creates very large application build (15MB single app.js file)

Is there anything I can do to make this file smaller?

I am builing production with yarn build-production

// package.json

  "scripts": {
    "clean": "rimraf dist/*",
    "build-production": "webpack --progress --bail --env production -p",
    "build-app": "webpack --progress --bail -p",
    "start": "webpack --progress --env prepare-localhost && webpack-dev-server --hot --open --watch"
  },




// webpack.conf.js
'use strict';

/* eslint no-console: "off" */
const configFactory = require('./config/webpack');
const defaultConfig = 'dev';

module.exports = (configName) => {

    // If there was no configuration give, assume default
    const requestedConfig = configName || defaultConfig;
    let loadedInstance = null;

    try {
        loadedInstance = configFactory(configName);
    } catch(exception) {
        console.warn('Probably config is missing, used dev as default. Please try: production, localhost, test, prepare-localhost... Exception: ' + exception.message);
        loadedInstance = configFactory(defaultConfig);
    }

    // Set the global environment
    process.env.NODE_ENV = loadedInstance.env;

    return loadedInstance.config;
};

// package.json
"webpack": "^3.5.6",
"webpack-cli": "^2.0.11",
"webpack-dev-server": "^2.7.1"

I'm not good with webpack configuration so maybe you could tell me what should I change or add? This is latest react app.

Answer 1

It is hard to know what causing the large files, webpack 4 is configured by default to output an optimised bundles, so my guess would be that some of your dependencies is very large.

In order to determine what is going on inside your bundle, you can add the webpack-bundle-analyzer. If you need help, upload a screenshot with the results.

EDIT As mentioned, there are huge libs inside your bundle, such as momentjs, material-ui, lodash.

Few pointers,

1. react-tag-input - should be 40kb, but looks like it uses different lodash version therefore you have 2 versions of lodash and 2 versions of React! - consider using different lib
2. app.scss looks huge, check why.
3. consider code splitting, your app probably not having charts on each of the pages, so,
   • load recharts only when needed.
   • load react-datepicker only when needed.
   • load emoji-mart only when needed.
   • load react-datepicker only when needed.
4. why do you need jquery?