Home

Issue: 478

[wip] CSS & PWA benchmarks

[issue link]

Hi. Today vuejs/pwa repo is public. Their build steps are including:

  • CSS across all components extracted into a single file and minified with cssnano.
  • All static assets compiled with version hashes for efficient long-term caching, and a production index.html is auto-generated with proper URLs to these generated assets.

Also @addyosmani stated on vuejs/pwa#1 checklist. (He seems not talking about critical path css and only for global stylesheets)

CSS extraction for production

Benchmarks (only css analysis)

I started a lighthouse benchmark on a local nuxt 0.10.5 generated version to avoid network latency and server render times. with bootstrap css + some global styles. (serving with a docker nginx webserver)

Using default nuxt config

(Lighthouse)
image

[WIP]

Trying to build on nuxt using same stack used in vue/pwa configurations. webpack.prod.conf.js

  • Using cssnano
  • Adding back css generation using extract-text-webpack-plugin
  • optimize-css-assets-webpack-plugin
  • Check performance of SSR (req/second) with both approaches.
This feature request is available on Nuxt.js community (#c418)