Why did the total build size increase after the selection of the library code?

Question

JavaScript

Added the following code to webpack.config.js to separate libraries into a separate bundle:

var fs = require('fs');

var package = JSON.parse(fs.readFileSync('./package.json','utf-8'));
var vendor = [];
for (var name in package.dependencies) {
  vendor.push(name);
}

module.exports = {
  entry: {
    app: './src/main.js',
    vendor: vendor
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor'
    })
  ]
}

We get:

Asset      Size  Chunks                    Chunk Names
       app.build.js   50.6 kB       0  [emitted]         app
    vendor.build.js    711 kB       1  [emitted]  [big]  vendor
          style.css     53 kB    0, 1  [emitted]         app, vendor

total 814 kb
If you comment out the vendor, then we learn the following picture:

Asset      Size  Chunks                    Chunk Names
       app.build.js    536 kB       0  [emitted]  [big]  app
    vendor.build.js   1.44 kB       1  [emitted]         vendor
          style.css    192 kB       0  [emitted]         app

total 729 kb
How to make sure that both modules are selected and the size is not increased?
Well, at the same time - how to make webpack rebuild only app, without node-modules?

Answer 1

I suspect that not all dependencies packages are actually used.
In the first case, you forcibly added everything to the assembly, and in the second, the webpack collected only what you need