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!

You can disable source map and you should see it builds much faster — CodinCat
– CodinCat, Commented Apr 24, 2017 at 11:11
@CodinCat - sure, that worked for me. Builds were timing out on DO, 512 MB RAM. — Anthony Nandaa
– Anthony Nandaa, Commented Sep 12, 2017 at 23:58

Anthony Nandaa · Accepted Answer · 2017-09-13 00:22:54Z

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` }),

Disabling sourceMaps on vue-cli-service 4.5 didn't reduce the build time so much for me. (vue.config.js productionSourceMap key)

albinscode · Accepted Answer · 2022-09-15 11:36:09Z

The source maps creation can take a long time and it grows obviously with source code. So for a simple application you will gain probably few seconds but on a big application with several libraries it can takes several minutes.

As an addition to @ProfNandaa, you can have a VueJs approach by adding the following parameter in vue.config.js :

productionSourceMap: false

Reference to the VueJs 2 doc : https://cli.vuejs.org/config/#productionsourcemap

Please note that keeping source maps even in production enables you to debug the application (using dev tools browser) and has not impact with application execution.

safinilnur · Accepted Answer · 2022-12-31 01:53:08Z

0

in my case I used ts-loader. The time reduced fromo 15 minutes to 5 seconds after adding transpileOnly: true

answered Dec 31, 2022 at 1:53

safinilnur

3152 silver badges6 bronze badges

1 Comment

Ahmed Abdelrahman Over a year ago

please explain your answer a little bit.

Collectives™ on Stack Overflow

Vuejs + webpack: npm run build slow

3 Answers 3

1 Comment

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Related