Nuxt.js: Import of nuxt is slow - 3 seconds for import -> speed it up somehow

Created on 2 Aug 2018 · 12Comments · Source: nuxt/nuxt.js

What problem does this feature solve?

It is pretty critical for serverless setups on lambda and so on.
https://nuxtjs.org/api/nuxt-render/

console.time('test')
const { Nuxt } = require('nuxt-edge')
console.timeEnd('test')

test: 2847.106ms

Its way too much to be 3sec for cold start

I tried to look why it take so long and 99% of time is spent on in nuxt-edge\dist\nuxt.js at the import section for that 50 imports section ..

There should be just a render function that dont have all that 50+ imports and other things that not really needed for rendering and used for building/debugging/etc

Nuxt 1 have like 0.5-1 second less import time, but still way too much, but nuxt-edge made it even worse

_{This feature request is available on Nuxt community (#c7483)}

available soon feature-request

Source

aldarund

👍2

Most helpful comment

Hi @aldarund

Actually, when the app is built, it's better to use nuxt-start, until the package is published for 2.0, you can require it like so:

console.time('test')
const { Nuxt } = require('nuxt-edge/dist/nuxt-start')
console.timeEnd('test')

test: 208.735ms

When released, you will do:

const { Nuxt } = require('nuxt-start')

I'll keep it open until Nuxt 2.0 is out.

Atinux on 8 Aug 2018

👍4

All 12 comments

Hi @aldarund

Actually, when the app is built, it's better to use nuxt-start, until the package is published for 2.0, you can require it like so:

console.time('test')
const { Nuxt } = require('nuxt-edge/dist/nuxt-start')
console.timeEnd('test')

test: 208.735ms

When released, you will do:

const { Nuxt } = require('nuxt-start')

I'll keep it open until Nuxt 2.0 is out.

Atinux on 8 Aug 2018

👍4

It does not provide Builder.

import { Nuxt, Builder } from 'nuxt-edge/dist/nuxt-start'

yoyo837 on 27 Aug 2018

It's normal since it's only runtime of Nuxt.js, no webpack, no babel, only Core, Modules and Renderer.

Atinux on 27 Aug 2018

I summarized some time-consuming libs in Nuxt:

console.time('Time-consuming dependencies')
require('webpack')
require('webpack-bundle-analyzer');
require('uglifyjs-webpack-plugin');
require('@vue/component-compiler-utils')
require('html-minifier')
require('html-webpack-plugin')
console.timeEnd('Time-consuming dependencies')

console.time('Nuxt Core                  ')
require('nuxt-edge')
console.timeEnd('Nuxt Core                  ')

Output:
Time-consuming dependencies: 1560.845ms
Nuxt Core                  : 454.866ms

Majority of them have major release between Nuxt 1 and Nuxt-edge.

And the importing is more like a warming step, all imported modules will be cached, so I think it's reasonable to have this funcitonality.

@Atinux @pi0, do you think it's necessary to make them dynamic or lazy require in Nuxt, for example: require webpack inside Builder constructor or some where else inside function scope ?

clarkdo on 27 Aug 2018

I think its fine to have them as warmup with current time as long as render functionality can be imported and used separately ( from nuxt-start )
Is there a problem that reducing import time will solve ? It will make code complicated for what benefit?

aldarund on 27 Aug 2018

👍1

I'm sorry I forgot that we have published nuxt-start-edge for only including Nuxt core functionality and reducing the time consuming.

https://www.npmjs.com/package/nuxt-edge-start

clarkdo on 28 Aug 2018

Which of those Time-consuming dependencies does nux-start require?
Because preloading them makes it go from 119.124ms to 68.404ms
I guess they have common dependencies on some smaller packages?