Webpack 4 “size exceeds the recommended limit (244 KiB)”

Question

I have two files which are combined under 600 bytes (.6kb) as below.

So how is it that my app.bundle.js is so large (987kb) and more importantly how does one manage

Answer 1

The main problem is devtool: 'inline-source-map' in webpack.common.js file in your case,in my case i use in development 'cheap-module-eval-source-map', this devtool is very nice for development mode but make my bundle.js to 4.2MiB,so,in production mode in webpack.prod.js file i change devtool like this module.exports = merge(common, { mode: 'production', performance: { hints: false }, devtool: 'source-map' });' and now from 4.2mb i 've got 732KiB of bundle.js. This devtool will slow down process of bundling for few more seconds but will remarkably reduce the size of the file,in my example from 4.18 MiB to 732 KiB .