How to minimize the size of webpack's bundle?

itaied

I'm writing a web app using react and webpack as my module bundler. My jsx code is really light so far, the size of the entire folder is 25 kb.

My bundle.js created from webpack is 2.2 mb though. After running the optimization with the -p flag, it reduces the bundle to 700kb, which is still extremely big.

I have looked into the react.min.js file and its size is 130kb.

Is it possible that the webpack produces such big files or am I doing something wrong?

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './public/components/main.jsx',
  output: {
    path: __dirname + "/public",
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /.jsx?$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
      query: {
        presets: ['es2015', 'react']
      }
    }, {
      test: /\.css$/,
      loader: "style!css"
    }]
  }
};

EDIT

package.json:

{
  "name": "XChange",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "main": "./bin/www",
  "devDependencies": {
    "body-parser": "~1.13.2",
    "cookie-parser": "~1.3.5",
    "debug": "~2.2.0",
    "express": "~4.13.1",
    "jade": "~1.11.0",
    "morgan": "~1.6.1",
    "serve-favicon": "~2.3.0",
    "react-dom": "~0.14.3",
    "react": "~0.14.3",
    "webpack": "~1.12.9",
    "babel-loader": "~6.2.0",
    "babel-core": "~6.2.1",
    "babel-preset-react": "~6.1.18",
    "babel-preset-es2015": "~6.1.18",
    "react-bootstrap": "~0.28.1",
    "material-ui": "~0.14.0-rc1",
    "history": "~1.13.1",
    "react-router": "~1.0.2",
    "style-loader": "~0.13.0",
    "css-loader": "~0.18.0"
  },
  "dependencies": {
    "express-validator": "~2.18.0",
    "mongoose": "~4.2.9",
    "kerberos": "~0.0.17",
    "bcrypt": "~0.8.5"
  }
}
dreyescat

According to your comments you are using material-ui and react-bootstrap. Those dependencies are bundled by webpack along with your react and react-dom packages. Any time you require or import a package it is bundled as part of your bundle file.

And here it comes my guess. You are probably importing the react-bootstrap and material-ui components using the library way:

import { Button } from 'react-bootstrap';
import { FlatButton } from 'material-ui';

This is nice and handy but it does not only bundles Button and FlatButton (and their dependencies) but the whole libraries.

One way to alleviate it is to try to only import or require what is needed, lets say the component way. Using the same example:

import Button from 'react-bootstrap/lib/Button';
import FlatButton from 'material-ui/lib/flat-button';

This will only bundle Button, FlatButton and their respective dependencies. But not the whole library. So I would try to get rid of all your library imports and use the component way instead.

If you are not using lot of components then it should reduce considerably the size of your bundled file.

As further explanation:

When you are using the library way you are importing all these react-bootstrap and all these material-ui components, regardless which ones you are actually using.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How to minimize javascript with Webpack?

From Java

Webpack 4 - How to configure minimize?

From Dev

How can I minimize the code size of this program?

From Java

How to decrease prod bundle size?

From Dev

Webpack : How to optimize the generated bundle.js? It's way too big in my case

From Dev

How can i add 'vue.js' to webpack's bundle.js

From Java

How to build minified and uncompressed bundle with webpack?

From Dev

How to generate bundle.js with react and webpack?

From Dev

how to call methods/components in webpack bundle output?

From Dev

How to generate bundle.js with react and webpack?

From Dev

how to force webpack to load umd bundle of a library

From Dev

how do you use the --optimize-minimize flag with webpack

From Dev

How to minimize whitespace around Baidu's echarts

From Dev

ExtJS - How to minimize the roweditor's height?

From Dev

How to compress/minimize size of JSON/Jsonify with Flask in Python?

From Dev

How to use "Open Broadcaster Software" or HandBrake to minimize file size?

From Dev

Minimize only one Webpack chunk

From Dev

Is there a webpack config to bundle webpack plugin?

From Java

How to bundle vendor scripts separately and require them as needed with Webpack?

From Dev

How can I bundle socket.io-client with webpack?

From Dev

How to bundle library without npm dependencies using webpack?

From Java

Angular Cli Webpack, How to add or bundle external js files?

From Dev

How to have a more readable bundle.js with webpack (sourcemap)?

From Dev

How to serve production react bundle.js built by webpack?

From Dev

How to have a more readable bundle.js with webpack (sourcemap)?

From Dev

How to exclude mobx and mobx-react from the bundle using webpack

From Dev

How to make webpack not bundle json when using require syntax?

From Dev

Webpack - How to bundle/require all files of a folder (subfolder)

From Dev

Liferay 6.1.20 : Minimize and bundle theme Javascript

Related Related

  1. 1

    How to minimize javascript with Webpack?

  2. 2

    Webpack 4 - How to configure minimize?

  3. 3

    How can I minimize the code size of this program?

  4. 4

    How to decrease prod bundle size?

  5. 5

    Webpack : How to optimize the generated bundle.js? It's way too big in my case

  6. 6

    How can i add 'vue.js' to webpack's bundle.js

  7. 7

    How to build minified and uncompressed bundle with webpack?

  8. 8

    How to generate bundle.js with react and webpack?

  9. 9

    how to call methods/components in webpack bundle output?

  10. 10

    How to generate bundle.js with react and webpack?

  11. 11

    how to force webpack to load umd bundle of a library

  12. 12

    how do you use the --optimize-minimize flag with webpack

  13. 13

    How to minimize whitespace around Baidu's echarts

  14. 14

    ExtJS - How to minimize the roweditor's height?

  15. 15

    How to compress/minimize size of JSON/Jsonify with Flask in Python?

  16. 16

    How to use "Open Broadcaster Software" or HandBrake to minimize file size?

  17. 17

    Minimize only one Webpack chunk

  18. 18

    Is there a webpack config to bundle webpack plugin?

  19. 19

    How to bundle vendor scripts separately and require them as needed with Webpack?

  20. 20

    How can I bundle socket.io-client with webpack?

  21. 21

    How to bundle library without npm dependencies using webpack?

  22. 22

    Angular Cli Webpack, How to add or bundle external js files?

  23. 23

    How to have a more readable bundle.js with webpack (sourcemap)?

  24. 24

    How to serve production react bundle.js built by webpack?

  25. 25

    How to have a more readable bundle.js with webpack (sourcemap)?

  26. 26

    How to exclude mobx and mobx-react from the bundle using webpack

  27. 27

    How to make webpack not bundle json when using require syntax?

  28. 28

    Webpack - How to bundle/require all files of a folder (subfolder)

  29. 29

    Liferay 6.1.20 : Minimize and bundle theme Javascript

HotTag

Archive