CODEWITHSUNDEEP
javascriptperformancewebpackintegration
Arwed Mett
Arwed Mett

Reputation: 2750

How to minify webpack bundle?

I created an app based on Webpack. Now I want to deploy the application. That means I want to create a bundle.js for production.

What is the best way to do this? I have already tried this by setting the parameters --optimize-minimize and -p. Still the bundle.js has almost 2M which makes the site very slow to load.

Also I would like to get rid of the bundle.js and replace it by some amd modules.

My node dependencies are: "devDependencies": { "babel-core": "6.9.0", "babel-eslint": "5.0.4", "babel-loader": "^6.2.4", "babel-preset-es2015": "6.9.0", "babel-preset-react": "^6.5.0", "babel-preset-stage-0": "^6.5.0", "bootstrap-loader": "^1.0.10", "bootstrap-webpack": "^0.0.5", "css-loader": "^0.23.1", "eslint": "2.10.2", "eslint-plugin-react": "4.3.0", "exports-loader": "^0.6.3", "expose": "^0.1.4", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.8.5", "imports-loader": "^0.6.5", "less-loader": "2.2.3", "node-sass": "3.7.0", "react-hot-loader": "^1.3.0", "resolve-url-loader": "^1.4.3", "sass-loader": "^3.2.0", "style-loader": "0.13.1", "url-loader": "^0.5.7", "webpack": "1.13.0", "webpack-dev-server": "^1.14.1" }, "dependencies": { "react-router": "^2.1.1", "react": "^0.14.7", "react-dom": "^0.14.7", "jquery": "^2.2.2", "less": "^2.6.1", "flux": "^2.1.1", "font-awesome": "^4.5.0", "electron-prebuilt": "^0.36.11", "bootstrap": "^3.3.6", "font-awesome-webpack": "^0.0.4", "fs": "^0.0.2", "react-dropzone": "^3.3.2" }

Upvotes: 0

Views: 3826

Answers (4)

scriptify
scriptify

Reputation: 145

If you want to minimize the size of the outcoming bundle-file, you need to add some plugins. Those two plugins reduce the size a lot.

Also, be sure to disable source maps which add some extra size to the bundle.

You could also add these lines to your plugins configuration:

...
new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify('production')
}),
...

This tells webpack that you are in production mode: This information may afterwards be used by frameworks/libraries to act differently (e.g. disable logging).

Upvotes: 2

Arwed Mett
Arwed Mett

Reputation: 2750

The bundle.js became so large because webpack included all the images in it. To prevent webpack from doing this you have to change the loader to this:

{ test: /\.(jpg|png)$/, loader: 'url?limit=25000', include: PATHS.images }

For more information read this: http://survivejs.com/webpack/loading-assets/loading-images/

Upvotes: 0

batmaniac7
batmaniac7

Reputation: 422

Webpack plugins:

plugins: [
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    })
]

Upvotes: 0

brk
brk

Reputation: 50291

Not sure what bundle.js is consist of

If you have not yet tried then you can try these followings

  1. Separate the library and plugin files.This is called bundle splitting

For example you can entry: 

{
    app: PATHS.app,
    vendor: ['jquery','angular']
   }
  1. You can also take a look at Setting environment variable

Upvotes: 0

Related Questions