Eliminate external resource requests (above and below the fold)
[issue link]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>