I've recently noticed that when I try to initially load my web application that it takes some time before every thing pops up (~15 seconds). I took a look at my network tab and noticed that it was my bundle.js
file that was hogging up all the time. To my surprise the bundle.js file is 21.8mb in size, which I assume is astronomical. So of course I looked up how I could reduce the size of my bundle.js
file, and it looks like webpack
is the library I want. We currently use the webpack library in our application but it's version 3. When doing my research it looked like the only version of webpack that could reduce the bundle size was 4 or higher. The problem is that I know nothing of how webpack works and what the consequences of migrating it to version 4 will have, so I was wondering if there was a way to do this within webpack v3
?
Here is our webpack.config.js
NOTE: I did not do the initial setup for this webpack file, so I'm not sure what some of it means.
const path = require('path');
module.exports = {
entry: ['babel-polyfill', './src/index.js'],
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.(js|jsx)$/,
exclude: /node_modules/
}, {
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},{
test: /\.(jpe?g|png|gif|svg|mp3)$/i,
loaders: [
'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
}
]
},
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
historyApiFallback: true
}
};
This is our package.json file
{
"name": "my-app",
"version": "0.0.2",
"main": "index.js",
"author": "Your Name",
"license": "MIT",
"scripts": {
"start": "node src/entry",
"start-dev": "npm-run-all --parallel build babel-node",
"serve": "live-server public/",
"build-linux": "clear && webpack && clear && yarn build-server && clear && yarn start",
"build-windows": "cls && webpack && cls && yarn build-server && cls && yarn start",
"build-server": "babel src/server -d src",
"dev-server": "webpack-dev-server",
"babel-node": "nodemon --exec babel-node src/server.js"
},
"dependencies": {
"aws-sdk": "^2.358.0",
"axios": "^0.19.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "7.1.1",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "6.24.1",
"babel-preset-stage-0": "^6.24.1",
"bcryptjs": "^2.4.3",
"body-parser": "^1.18.2",
"core-js": "^2.5.3",
"css-loader": "0.28.4",
"express": "latest",
"file-loader": "^1.1.5",
"fs": "0.0.1-security",
"google-maps-react": "^1.1.11",
"html2canvas": "^1.0.0-rc.3",
"image-webpack-loader": "^4.6.0",
"immutability-helper": "^2.4.0",
"jquery": "^3.4.1",
"jsonwebtoken": "^8.1.0",
"jspdf": "^1.5.3",
"lodash": "^4.17.14",
"md5": "^2.2.1",
"moment": "^2.22.2",
"node-sass": "^4.11.0",
"nodemailer": "^4.7.0",
"normalize.css": "7.0.0",
"npm": "^6.10.1",
"promise-mysql": "^3.1.0",
"prop-types": "^15.6.0",
"qs": "^6.9.4",
"react": "^16.0.0",
"react-csv": "^1.0.14",
"react-dom": "^16.0.0",
"react-ga": "^2.7.0",
"react-router-dom": "4.2.2",
"react-scripts": "^2.1.3",
"sass-loader": "6.0.6",
"socket.io": "^2.0.3",
"style-loader": "0.18.2",
"table2csv": "^1.1.1",
"twilio": "^3.24.0",
"validator": "8.0.0",
"webpack": "^3.12.0",
"webpack-dev-middleware": "^3.5.0",
"webpack-dev-server": "^3.1.14"
},
"devDependencies": {
"concurrently": "^3.5.0",
"npm-run-all": "^4.1.1"
}
}
I looked at the migration documentation on webpack's website, but it is all so confusing to me. If anyone can point me in the right direction that would be great. If it's possible to reduce my bundle size using v3 then I would rather do that than have to migrate entirely over to v4 but if that's what it takes than so be it.