I'm new to Webpack. I try to use Webpack for two main reasons :
require(...)
But with the application I just started (there are currently something like four React components only ), the bundle.js
file generated by Webpack is 3.87Mb!!!
I'm pretty sure Webpack bundles things I won't ever need. I'd like to know how to optimize the generated file... How do I "debug" Webpack's process?
My webpack.config.js
:
var webpack = require("webpack");
module.exports = {
entry: "./app/bootstrap.js",
output: {
path: __dirname,
publicPath: "/public/",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.css$/,
loader: "style!css"
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader'
},
{
test: /\.js$/,
include: /vis/,
loader: 'babel-loader'
},
{
test: /\.(png|woff|woff2|eot|ttf|svg|gif|jpg|jpeg|bmp)(\?.*$|$)/,
loader: 'url-loader?limit=100000'
}
]
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
}),
new webpack.optimize.UglifyJsPlugin({minimize: true})
]
};
and package.json
:
{
"name": "XXXXX",
"version": "1.0.0",
"main": "",
"scripts": {
"dev": "webpack --progress --colors --watch --devtool eval",
"prod": "webpack --progress --colors"
},
"author": "",
"license": "ISC",
"dependencies": {
"alt": "^0.16.10",
"bootstrap": "^3.3.5",
"es6-promise": "^2.3.0",
"i18next-client": "^1.10.2",
"jquery": "^1.10.2",
"react": "^0.13.3",
"react-router": "^0.13.3",
"toastr": "^2.1.0",
"vis": "^4.4.0"
},
"devDependencies": {
"css-loader": "^0.15.1",
"babel-core": "^5.6.18",
"babel-loader": "^5.3.1",
"es6-module-loader": "^0.17.3",
"extract-text-webpack-plugin": "^0.8.2",
"file-loader": "^0.8.4",
"node-libs-browser": "^0.5.2",
"webpack": "^1.9.13",
"url-loader": "^0.5.6",
"style-loader": "^0.12.3",
"webpack-dev-server": "^1.9.0"
}
}
Any help on how to optimize the generated bundle.js
?
Using Production Mode in Webpack. Running your project in production mode reduces the bundle sizes compared to the development mode. Webpack provides a separate flag ( -p ) to enable this feature and removes all the white spaces and newlines in the code.
Every React developer should add compression to their bundling process. One of the most impactful techniques to reduce the bundle size of a React application is compression. compression is a process in which the size of a file is reduced by re-encoding the file data to use fewer bits of storage than the original file.
simply
webpack --production
or
webpack -p
take a look at http://www.jonathan-petitcolas.com/2015/05/15/howto-setup-webpack-on-es6-react-application-with-sass.html
Add this in your production config file:
plugins: [
new webpack.DefinePlugin({
'process.env': {
// This has effect on the react lib size
'NODE_ENV': JSON.stringify('production'),
}
}),
new ExtractTextPlugin("bundle.css", {allChunks: false}),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
mangle: true,
compress: {
warnings: false, // Suppress uglification warnings
pure_getters: true,
unsafe: true,
unsafe_comps: true,
screw_ie8: true
},
output: {
comments: false,
},
exclude: [/\.min\.js$/gi] // skip pre-minified libs
}),
new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]), //https://stackoverflow.com/questions/25384360/how-to-prevent-moment-js-from-loading-locales-with-webpack
new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0
})
],
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With