Comments (14)
Atinux
commented on April 28, 2024
11
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!
from nuxt.js.
Atinux
commented on April 28, 2024
10
@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.onReadymethod 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-pluginvue-style-loaderwill 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 configureextract-text-webpack-loader- just usevue-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 🔥
from nuxt.js.
Atinux
commented on April 28, 2024
2
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 :-)
from nuxt.js.
antcook
commented on April 28, 2024
2
Looks like 2.2 is out! https://github.com/vuejs/vue/releases/tag/v2.2.0
from nuxt.js.
jaredreich
commented on April 28, 2024
This would make a basic nuxt.js score perfect on Google PageSpeed Insights (https://developers.google.com/speed/pagespeed/insights/)
from nuxt.js.
jaredreich
commented on April 28, 2024
Right, so then perhaps this should be done only for the style in <head>?
from nuxt.js.
jaredreich
commented on April 28, 2024
Cool, best of luck.
from nuxt.js.
zspecza
commented on April 28, 2024
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
from nuxt.js.
ckken
commented on April 28, 2024
i'm looking for~
from nuxt.js.
lmj0011
commented on April 28, 2024
This issue looks to be related to the problem I ran into.
Not being able to load local resources in the head().
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>from nuxt.js.
jaredreich
commented on April 28, 2024
Excellent, very excited for this.
from nuxt.js.
msudgh
commented on April 28, 2024
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.
from nuxt.js.
Atinux
commented on April 28, 2024
The 0.10 is out with CSS embedded.
from nuxt.js.
lock
commented on April 28, 2024
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.
from nuxt.js.
Related Issues (20)
- https://nuxt.com isn't working on firefox HOT 2
- "No match found for location with path" is still spammed on unknown paths HOT 1
- Uncaught SyntaxError when building Nuxt.js 3.11.2 with Webpack HOT 1
- Docs: Nuxt Layers video update with latest one
- Docs: Nuxt Layers video update with latest one
- node .output/server/index.mjs error HOT 2
- Cannot find module from node_modules
- Move `@nuxt/ui-templates` into nuxt/nuxt monorepo
- Refreshed NuxtWelcome design (+ other error pages?)
- Resolve `runtimeConfig` within nuxt options
- public subfolder name collision with route causes 301 redirect HOT 1
- Unable to access logger in client or server from plugin HOT 1
- Error with `dist` symlink with SST Ion
- Navigating from router-view throws Missing required param
- Failed CSS preloads shouldn't throw errors
- Big bundle size due to jsdom canvas HOT 1
- 页面刷新 页面抖动
- ERROR (node:52837) [DEP0180] DeprecationWarning: fs.Stats constructor is deprecated HOT 1
- nuxt aos set options { once: true }, only show the animation on the first visit but not work when navigating to a page
- static generating is removing invalid html, but not reporting when linting
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nuxt.js.