Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nuxt Performances: Present and Future #6467

Open
Atinux opened this issue Sep 26, 2019 · 13 comments
Open

Nuxt Performances: Present and Future #6467

Atinux opened this issue Sep 26, 2019 · 13 comments

Comments

@Atinux
Copy link
Member

@Atinux Atinux commented Sep 26, 2019

On top of letting your write Vue files, creating pages with the filesystem and managing your SEO with vue-meta, the NuxtJS team and contributors worked a lot of shipping by default an efficient and performant web application.

What do we have today:

What do we plan to do:

  • Webpack 5 support
  • Reducing initial bundle size
    • Nuxt starter app could be a simple app.vue file (including only vue and vue-meta)
    • Vue3 Support
    • Select features individually to reduce bundle sizes (experimental)
  • Smart SSR Module (stale-while-revalidate cache aka SPR and dynamic SSR/SPA switching)
  • Multi target builds (static, server, serverless)
  • Lamba API Support
  • CI/CD for continues performance measurements (for PRs to the core)
  • Critical CSS extraction
  • Image Module (lazy-loading and size-optimize)
  • Supporting APP Shell (SSR only for layout)
  • In discussion: Rewrite core in typescript

How to accomplish this:

Maintaining an open source project requires consistent effort, not just with adding code, but also code reviews and support. The NuxtJS team and contributors coordinates their efforts on Discord. We all work on our free time to maintain it and I do believe the Chrome Performance Fund could help us to pay ourselves and our contributors on this future work thanks to our Open Collective.

@cmty cmty bot closed this Sep 26, 2019
@cmty cmty bot added the cmty:question label Sep 26, 2019
@Atinux Atinux reopened this Sep 26, 2019
@nuxt nuxt deleted a comment from cmty bot Sep 26, 2019
@Atinux Atinux added available soon and removed cmty:question labels Sep 26, 2019
@Atinux Atinux pinned this issue Sep 26, 2019
@manniL manniL added the draft label Sep 26, 2019
@Niputi

This comment has been minimized.

Copy link

@Niputi Niputi commented Sep 30, 2019

https://github.com/maoberlehner/vue-lazy-hydration
should maybe also be added to the "What do we have today"

@Atinux

This comment has been minimized.

Copy link
Member Author

@Atinux Atinux commented Oct 1, 2019

Will update thank you @Niputi

@addyosmani

This comment has been minimized.

Copy link

@addyosmani addyosmani commented Oct 4, 2019

We all work on our free time to maintain it and I do believe the Chrome Performance Fund could help us to pay ourselves and our contributors on this future work thanks to our Open Collective.

I'm happy to share Chrome is donating $12,000 to support Web Performance optimizations on the Nuxt.js roadmap 🎉 We think this project's goals align well with helping reduce the initial bundle size of modern web experiences, like those built with Vue.

In particular, we're excited to see the project explore the proposed work on:

  • Reducing the baseline bundle costs for the Nuxt starter app
  • Image bloat reduction (via lazy-loading and better optimization)
  • Work on smarter SSR using SWR (stale-while-revalidate)

We know the work to upgrade to Webpack 5 has been a long one and are looking forward to seeing those changes land too! We hope this funding helps support your work just a little :)

~ signed Addy, @stubbornella and @spanicker

@galvez

This comment has been minimized.

Copy link
Member

@galvez galvez commented Oct 4, 2019

Work on smarter SSR using SWR

The term SWR is new to me. Can you clarify?

@addyosmani

This comment has been minimized.

Copy link

@addyosmani addyosmani commented Oct 4, 2019

SWR = stale-while-revalidate :)

@galvez

This comment has been minimized.

Copy link
Member

@galvez galvez commented Oct 4, 2019

@addyosmani ah gotcha, thank you :)

@assoft

This comment has been minimized.

Copy link

@assoft assoft commented Oct 5, 2019

This is great news

@stale stale bot added the stale label Oct 26, 2019
@manniL manniL added the pending label Oct 28, 2019
@stale stale bot removed the stale label Oct 28, 2019
@nuxt nuxt deleted a comment from stale bot Oct 28, 2019
@shadow81627

This comment has been minimized.

Copy link

@shadow81627 shadow81627 commented Dec 16, 2019

https://github.com/bazzite/nuxt-optimized-images
Automatically optimizes images used in Nuxt.js projects

Does this cover size-optimize for the Image Module?

@Atinux

This comment has been minimized.

Copy link
Member Author

@Atinux Atinux commented Dec 21, 2019

Actually, the nuxt-optimized-images handles the resize but it’s handled in Webpack directly, we also want to provide a system where your images are external or in the static directory :)

@axetroy

This comment has been minimized.

Copy link

@axetroy axetroy commented Jan 4, 2020

Can you consider reducing the size of nuxt in the production environment?

I found that when using Docker to package images, even in a production environment, the size is 400 ~ 500M, which is a waste of resources

Is it possible to consider compiling into a single Javascript file so that the user can further reduce the size by some tool. eg. webpack/ncc

So users can run the application by running the following command

> nuxt build
> cd ./dist
> ls -lh
total 44040192
-rw-r--r--    1 root  staff   44040192B 12 29 13:45 index.js
> node ./index.js
Listen on port 3000

I hope the final production environment file is ideal in the size of 400-500M 20-50 M

@danielroe

This comment has been minimized.

Copy link
Contributor

@danielroe danielroe commented Jan 4, 2020

@axetroy Have you tried using nuxt-start?

@axetroy

This comment has been minimized.

Copy link

@axetroy axetroy commented Jan 4, 2020

@danielroe
It has nothing to do with the situation I describe

@danielroe

This comment has been minimized.

Copy link
Contributor

@danielroe danielroe commented Jan 4, 2020

@axetroy I've spent some time slimming Nuxt Docker images, and nuxt-start is a key ingredient.

If you are starting Nuxt programmatically, you could try listing just @nuxt/core in your dependencies and adding any additional ones as needed, such as vue-meta, etc. You might also find you don't need to include buildModules in your prod build, and I highly recommend configuring yarn autoclean.

The issue you highlight is, I think, not an issue with Nuxt per se but in the nature of node_modules-based projects. ncc is a good solution. With now-builder, for example, it's routine to create 10-20Mb Nuxt lambdas. I am following this PR with interest as the serverless target has the potential to deliver the kind of build you're probably looking for.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
9 participants
You can’t perform that action at this time.