Vuejs + webpack: npm run build slow

Question

I'm learning webpack and Vuejs. I've followed the simple instructions at https://vuejs-templates.github.io/webpack/ and that works.

However, when I run npm run build to make a production version it takes 12 seconds! I don't understand why this minute demo single-page, no function app that is only 115kB in its entirety takes this long to build.

I've read in various places about excluding node_modules from webpack configs, and I can't see that in vue-cli's webpack template - is it trying to minify, lint etc. all the library code or something?

I realise this is very much a noob question, so please be kind to me!

Answer 1

As it was pointed out in the comments by @CodinCat, this is because builds are memory intensive.

They will be slow if you have enough RAM or they will exit with error code 137 if you don't have enough RAM, e.g. running on a small VPS, Droplet, etc.

To optimize these builds, you can change the following line in the build/webpack.prod.conf.js, sourceMap: false (was line 38 in my case), since sourcemaps are memory intensive:

new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false
  },
  sourceMap: false // changed from `true`
}),