Nuxt.js: Build minimal Node.js app without Nuxt dependency

[aedm]

Right now a production build weighs 100+ megabytes even for the simplest Nuxt application. I wonder if there's a way to create smaller deployments.

What I'm looking for is a way to build a web app:

• that's a simple Node application (that can be started with $ node main.js or something alike)
• that contains all the files required (images, static files, etc.)
• that doesn't depend on Nuxt or any development package
• that optionally doesn't include the original client-side JS source, only the packed bundle
• but still does everything that a Nuxt application does.

I come from Meteor, which does something similar via meteor build.

The reason I'm curious is that smaller packages make Docker-based build/distribute/deploy pipelines faster, also I believe deploying unnecessary dependencies (eg. Babel transpilers) increase the attack surface, too.

_{This question is available on Nuxt.js community (#c2243)}

[pi0]

Hey @aedm. I would like to put multiple answers to the same issue as we have exactly the same concerns at Fandogh for our Nuxt based docker images.

For the ideal solution, we should separate build dependencies from core functionalities. (And adding nuxt as a devDependency). This was why nuxt project introduced a new package called nuxt-start which only depends on .nuxt and static files and less npm dependencies. There are currently some regressions with [email protected] and it also needs more documentation for build and usage workflow. We will work on it soon.

For optimizing docker image size, the most pain we discovered was keeping cache and unnecessary files in the final image. Cleaning up during ‍yarn install reduces our final images to ~30M gzipped which is something reasonable. We use an special crafted image based on node banian/node which has some small utilities for this. Here is an optimized Dockerfile:

FROM banian/node

ENV NODE_ENV=production

# Add dependencies in a separate layout for faster incremental builds
ADD package.json yarn.lock /usr/src/app/

# Install dependencies without altering lock file and cleanup everything at the same step
RUN yarn --frozen-lockfile --non-interactive && node-clean

# Add real source code and do build
ADD . /usr/src/app/
RUN yarn build

Finally, all of the above is just current state. Better and more optimized workflows will come with next releases.

Good luck :)

[aedm]

Thank you, @pi0, nuxt-start definitely sounds promising! I'll check it out and see if I can contribute somehow.

[johndays]

Hi guys, thanks a lot for the feedback!

I have exactly the same problem, I am trying to currently build an image with nuxt, but its dependencies are quite big (~200mb).

nuxt-start seems quite nice to reduce the size of the image. Does somebody know when nuxt-start npm package will be updated to the version 1.0.0?

I see in the github you have it as 1.0.0 but in npm is still the old 1.0.0-rc11

Thanks a lot 👍

[maximivanov]

Hey guys, what's the best way to reduce nuxt's runtime dependency size in mid 2018?
We're running Nuxt SSR app in Lambda but recently we've hit Lambda's 250mb limit for uploaded source code size and I realized nuxt is the major contributor to that. Even after removing dev dependencies node_modules is still huge:

(cost-of-modules is https://github.com/siddharthkp/cost-of-modules)

I assume after nuxt build is done many of nuxt's deps are not needed for runtime?
Is it safe to exclude postcss, babel, webpack etc before uploading project to the server? (I can do that with serverless's exclude)

[Atinux]

Indeed, we have nuxt-start (outdated right now).

With 2.0, you will need to install nuxt as devDependencies and nuxt-start as dependencies to avoid this outstanding size :)

[cmty[bot]]

This question has been resolved by @Atinux, see answer.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.