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.

felixmosh · Accepted Answer · 2019-07-06T19:36:11.440

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,

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
app.scss looks huge, check why.
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.
why do you need jquery?

You use all possible libraries available in reactjs ;) Do you load the entire lodash? Why you can only loading what you need. `import { map, tail, times, uniq } from 'lodash';` or `import map from 'lodash/map'; import tail from 'lodash/tail'; import times from 'lodash/times'; import uniq from 'lodash/uniq';` The same with other libraries, after all they are not immediately needed, you can dynamically load them. https://medium.com/front-end-weekly/loading-components-asynchronously-in-react-app-with-an-hoc-61ca27c4fda7 or https://facebook.github.io/create-react-app/docs/code-splitting — Grzegorz T., Jul 06 '19 at 14:09

Webpack builds large production file

1 Answers1