Eliminate external resource requests (above and below the fold) #12

jaredreich · 2016-11-21T20:05:53Z

What would you think of a nuxt.js app using making no external resource requests for it's own JS and CSS files? It would all be inline injected into lib/views/app.html

Before:

<% const {
  title, htmlAttrs, bodyAttrs, link, style, script, noscript, meta
} = context.meta.inject() %><!DOCTYPE html>
<html n-head-ssr ${htmlAttrs.text()}>
  <head>
    ${meta.text()}
    ${title.text()}
    ${link.text()}
    ${style.text()}
    ${script.text()}
    ${noscript.text()}
    <base href="<%= baseUrl %>">
    <% if (!dev) { %><link rel="stylesheet" href="<%= files.css %>"><% } %>
  </head>
  <body ${bodyAttrs.text()}>
    <%= APP %>
    <script type="text/javascript" defer>window.__NUXT__=<%= serialize(context.nuxt) %></script>
    <script src="<%= files.vendor %>" defer></script>
    <script src="<%= files.app %>" defer></script>
  </body>
</html>

After:

<% const {
  title, htmlAttrs, bodyAttrs, link, style, script, noscript, meta
} = context.meta.inject() %><!DOCTYPE html>
<html n-head-ssr ${htmlAttrs.text()}>
  <head>
    ${meta.text()}
    ${title.text()}
    ${link.text()}
    ${style.text()}
    ${script.text()}
    ${noscript.text()}
    <base href="<%= baseUrl %>">
    <% if (!dev) { %><style><%= files.css.CODE %></style><% } %>
  </head>
  <body ${bodyAttrs.text()}>
    <%= APP %>
    <script type="text/javascript" defer>window.__NUXT__=<%= serialize(context.nuxt) %></script>
    <script><%= files.vendor.CODE %></script>
    <script><%= files.app.CODE %></script>
  </body>
</html>

_{This feature request is available on Nuxt.js community (#c9)}

The text was updated successfully, but these errors were encountered:

jaredreich · 2016-11-21T20:07:56Z

This would make a basic nuxt.js score perfect on Google PageSpeed Insights (https://developers.google.com/speed/pagespeed/insights/)

Atinux · 2016-11-21T20:21:51Z

The problem here will be that the HTML will be too heavy.

The point of the actual configuration is to display the HTML (server-rendered) so the browser can display it before loading the JavaScript and making the page reactive afterwards.

But you're right about the performances, we want Nuxt.js to generate the fastest web apps :-)

jaredreich · 2016-11-21T20:24:29Z

Right, so then perhaps this should be done only for the style in <head>?

Atinux · 2016-11-21T20:30:48Z

Exactly, that's actually the main issue with Nuxt.js, I will meet Evan You in December to know how I can find a way to extract the CSS of the matched components to inject the minimal CSS in the .

I'll keep you updated!

jaredreich · 2016-11-21T20:32:06Z

Cool, best of luck.

zspecza · 2016-11-30T23:01:24Z

Haven't tested this (rather busy setting up my company atm) but I think this might work - although I think it may be inefficient (it might do multiple <style> tag injections) but it is a step in the right direction

https://github.com/kriasoft/isomorphic-style-loader

webpack.config

module.exports = {
  // ...
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
    ]
  },
  vue: {
    loaders: {
      ExtractTextPlugin.extract({
        loader: ['ismorphic-style-loader', 'css-loader'],
        fallbackLoader: 'vue-style-loader'
      })
    }
  },
  plugins: [
    new ExtractTextPlugin("style.css")
  ]
}

If my suspicion is correct that this solution creates a critical style injection more times than is appropriate, then it might be in the best interest to write a Webpack plugin that can extract the critical CSS from the ExtractTextPlugin output

FWIW I don't agree that the problem domain of this issue belongs in Nuxt, but rather in vue-loader

ckken · 2016-12-01T11:51:33Z

i'm looking for~

lmj0011 · 2017-01-28T22:40:53Z

This issue looks to be related to the problem I ran into.

Not being able to load local resources in the head().

https://nuxtjs.org/faq

This doesn't work

<script>
export default {
  data ({ req }) {
    return {
      name: req ? 'server' : 'client'
    }
  },
  head () {
    return {
      title: 'Tables',
      link: [
        { rel: 'stylesheet', src: '../../assets/css/lib/datatables/css/datatables-1.10.13.min.css' }
      ],
      script: [
        {
          src: '../../assets/js/datatables/datatables-1.10.13.min.js'
        }
      ]
    }
  }
}
</script>

Atinux · 2017-01-29T06:59:49Z

@lmj0011 please create a separate issue.

We might have a solution to have a perfect score on Google Page Speed and Lighthouse.

With the upcoming 2.2 of Vue, we will be able to insert the CSS into the page and also add a better debugging experience on SSR + code splitting on SSR as well.

Said by Evan You:

vue-router (2.2 already out) now supports a router.onReady method which allows waiting until all async hooks/components are resolved before rendering/hydration. This makes async hooks and code splitting a breeze.

bundleRenderer will be able to accept a special bundle object generated from code-split multi-chunk webpack builds

^ the bundle can be auto-generated by using vue-ssr-webpack-plugin

vue-style-loader will be upgraded to work on both client and server. On the server it collects the CSS and generates corresponding <style> tag strings and attaches it to the SSR render context. The user simply add these style tags to the HTML output. On the client it will smartly “hydrate” the style tags (thus hot-reloading will also work!)
^ this basically gives us automatic critical CSS for initial server render, and with code-splitting for CSS in all async chunks
Better yet the user no longer needs to configure extract-text-webpack-loader - just use vue-style-loader (which is the default) and it just works!

When the Vue 2.2 is out, we will try to implement it, so the 1.0 of Nuxt.js will create universal application with a perfect score 🔥

jaredreich · 2017-01-30T14:43:03Z

Excellent, very excited for this.

antcook · 2017-02-26T23:54:15Z

Looks like 2.2 is out! https://github.com/vuejs/vue/releases/tag/v2.2.0

msudgh · 2017-03-11T09:49:30Z

How exactly scss transformation works in nuxt.js? is it based on webpack loaders?
I want to use critical CSS instead CSS file that nuxt.js made it.

Atinux · 2017-03-24T22:50:06Z

The 0.10 is out with CSS embedded.

lock · 2018-11-05T14:07:42Z

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.

Atinux added the enhancement label Nov 21, 2016

Atinux mentioned this issue Dec 1, 2016

like the nextjs,the css insert the page head #27

Closed

Atinux added feature and removed enhancement labels Dec 8, 2016

dohomi mentioned this issue Jan 30, 2017

SSR compatibility vuematerial/vue-material#243

Closed

Atinux moved this from Backlog to 0.9.9 in Roadmap 1.0 Feb 3, 2017

Atinux self-assigned this Feb 5, 2017

Atinux added this to the 1.0 milestone Feb 5, 2017

Atinux moved this from 0.9.9 to 1.0 in Roadmap 1.0 Feb 6, 2017

alexchopin mentioned this issue Feb 14, 2017

Feature Request. Internal css and _nuxt/style.css defer loading #254

Closed

Atinux mentioned this issue Feb 16, 2017

Page/Component specific (S)CSS export / use #269

Closed

Atinux moved this from 1.0 to 0.10.0 in Roadmap 1.0 Feb 28, 2017

alexchopin mentioned this issue Mar 8, 2017

Split css build files (one css file for every page) #357

Closed

awronski mentioned this issue Mar 11, 2017

Critical CSS in Nuxt.js #363

Closed

alexchopin mentioned this issue Mar 14, 2017

Seperate css files for layouts #374

Closed

Atinux closed this as completed Mar 24, 2017

lock bot locked as resolved and limited conversation to collaborators Nov 5, 2018

danielroe added the 2.x label Jan 18, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Eliminate external resource requests (above and below the fold) #12

Eliminate external resource requests (above and below the fold) #12

jaredreich commented Nov 21, 2016 •

edited by ghost

jaredreich commented Nov 21, 2016

Atinux commented Nov 21, 2016

jaredreich commented Nov 21, 2016

Atinux commented Nov 21, 2016

jaredreich commented Nov 21, 2016

zspecza commented Nov 30, 2016 •

edited

ckken commented Dec 1, 2016

lmj0011 commented Jan 28, 2017 •

edited

Atinux commented Jan 29, 2017 •

edited

jaredreich commented Jan 30, 2017

antcook commented Feb 26, 2017

msudgh commented Mar 11, 2017 •

edited

Atinux commented Mar 24, 2017

lock bot commented Nov 5, 2018

Eliminate external resource requests (above and below the fold) #12

Eliminate external resource requests (above and below the fold) #12

Comments

jaredreich commented Nov 21, 2016 • edited by ghost

jaredreich commented Nov 21, 2016

Atinux commented Nov 21, 2016

jaredreich commented Nov 21, 2016

Atinux commented Nov 21, 2016

jaredreich commented Nov 21, 2016

zspecza commented Nov 30, 2016 • edited

ckken commented Dec 1, 2016

lmj0011 commented Jan 28, 2017 • edited

Atinux commented Jan 29, 2017 • edited

jaredreich commented Jan 30, 2017

antcook commented Feb 26, 2017

msudgh commented Mar 11, 2017 • edited

Atinux commented Mar 24, 2017

lock bot commented Nov 5, 2018

jaredreich commented Nov 21, 2016 •

edited by ghost

zspecza commented Nov 30, 2016 •

edited

lmj0011 commented Jan 28, 2017 •

edited

Atinux commented Jan 29, 2017 •

edited

msudgh commented Mar 11, 2017 •

edited