Webpack final bundle size is too big - node.js

Question

Making build using webpack 4.9.1 using npm run build
Package.json file command
"build": "webpack --mode production --config webpack.config.prod.js",
After build my bundle size is 1010 KiB which is too huge. trying to figure out since day but no success so finally putting here
webpack.config.prod.js
var path = require('path');
var webpack = require('webpack');
var CopyWebpackPlugin = require('copy-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
mode: 'production',
devtool: 'none',
entry: {
index: './src/index.js',
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/'
},
optimization: {
minimize: true,
},
plugins: [
new webpack.LoaderOptionsPlugin({ options: {} }),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new CopyWebpackPlugin([
{
from: 'style.css',
},
{
from: 'bootstrap.min.css',
},
{
from: 'index.html',
}
]),
new BundleAnalyzerPlugin(),
],
module: {
noParse:[ /node_modules\/localforage\/dist\/localforage.js/],
rules: [
{
test: /\.js$/,
enforce: "pre",
loaders: ['eslint-loader'],
include: path.join(__dirname, 'src')
},
{
test: /\.js$/,
loaders: ['babel-loader'],
include: [path.join(__dirname, 'src'), path.join(__dirname, 'translations')]
},
{
// do not exclude node_modules, since map.json is in node_modules
test: /\.json$/,
loader: 'json'
},
{
test: /\.css$/,
loaders: [ 'style-loader', 'css-loader' ]
},
]
}
};
my .babelrc looks like below
{
"presets": ["react", "es2015", "stage-2"],
"env": {
"development": {
"plugins": [
["react-transform", {
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"],
"preventFullImport": true
}, {
"transform": "react-transform-catch-errors",
"imports": ["react", "redbox-react"],
"preventFullImport": true
}]
}]
]
}
},
"plugins": [
["transform-object-rest-spread"],
["transform-react-display-name"],
["module-resolver", {
"root": ["./src"]
}]
]
}
I know I am missing something here.
Should be somewhere near to or more than webpack recommendations but 1010 KB is too much
FROM BUILD LOGS
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
index (1010 KiB)
bundle.js
Other relevant information:
webpack version: webpack 4.9.1
Node.js version: v6.10.0 Operating
System: mac OS Additional
tools: npm -v = 4.1.2

Answer 1

You might want to consider splitting your chunks. Like you can have separate chunk for your own code and node_modules.
You might want to minify your code in production mode to reduce the bundle size.
Here's what you can do with your webpack config file:
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
optimization: splitChunks: {
cacheGroups: {
vendor: {
chunks: "initial",
test: path.resolve(process.cwd(), "node_modules"),
name: "vendor",
enforce: true
}
}
},
minimizer: [
new UglifyJSPlugin({
uglifyOptions: {
sourceMap: true,
compress: {
drop_console: true,
conditionals: true,
unused: true,
comparisons: true,
dead_code: true,
if_return: true,
join_vars: true,
warnings: false
},
output: {
comments: false
}
}
})
]
This will create separate bundle for your node_module which you can include in your main file.