I Have These Warnings When I Build My Nuxtjs ProjectWarnings
I Use Vuetify, SCSS, Vue-monthly-picker for pick month date
In The nuxt.config.js
mode: 'universal',
ssr: false,
If I removed Mode and Make SSR: true, it gives me another error ( document not defined )
The Warning of asset size limit is because I use Vuetify, Vue-monthly-picker which increase assets size if i remove it warning gone.
is there any way i can remove warning without delete vuetify and vue-picker
Nothing bad/special here, your chunk's size is just big.
Webpack's recommendation is to tell you that you should be aware of not shipping too much JS.
You can check the official documentation page about treeshaking and how to optimize that kind of vendor package size here: https://vuetifyjs.com/en/features/treeshaking/#manually-importing
You could also look for alternatives (like TailwindCSS) or make your own CSS/components. Nothing to really worry about if your website is not required to have drastic loading time.
If you really want to go deeper into the rabbit hole, you can give a look to this checklist done by Smashing Magazine: https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/
EDIT to answer the comment queston
Looking from the official documentation page, you can disable those hints: https://webpack.js.org/configuration/performance/
You can disable the warnings with this configuration in your nuxt.config.js file:
export default {
build: {
extend(config) {
config.performance.hints = false
},
}
You can also use yarn build --quiet or set it in the configuration if you want 0 feedback on what is happening.
Or you can go and alter directly the chunk-size or toggle other things as showed here: Webpack 4 "size exceeds the recommended limit (244 KiB)"
I still do recommend to keep it as verbose as it is right now because it's always good to know what is happening with your application. And warning are not causing any trouble by themselves.
Related
I'm on Webpack 5, compiling mostly Vue sfc sass styles, and currently I achieved to extract all the css styles to a single css bundle using mini-css-extract-plugin.
Obviously this bundle has grown in size and consequently the download stars taking s bit too much time, so I'm trying to split it in smaller chunks to parallelize the download.
Found this SO question, but the user managed to solve the problem using multiple entry points (which I want to avoid since the project is a spa (am I wrong?)) and this answer which suggest to configure mini-css-extract-plugin filename property to use a function instead of a string, but it seems not working since every chunk passed to the function seems having the same name/id, maybe due starting from a single entry point?
new MiniCssExtractPlugin({
// example
filename: (x) => {
console.log(x.chunk.name);
console.log("=====");
return "css/main.[contenthash].css";
}
}),
> webpack-demo#1.0.0 build
> webpack
main
=====
main
=====
main
=====
main
=====
...
How can I split the outputted css bundle to multiple files?
I am adding a snippet from this codepen https://codepen.io/soulwire/pen/Ffvlo to display a particle animation. I'm adding it like this in my nuxt.config.js file:
plugins: [
{ src:'~/plugins/particles.js', mode:'client'}
],
It shows up and works but unfortunately the performance is so bad that the animation is not really perceivable as it should be. Is there anything I could do differently so that the performance is the same as on the codepen?
Also i am aware that this is now registered as a global plugin and always loaded. Is there a way to add it only to a specific site?
Thanks in advance!
This question has been asked several times here(here the most relevant,Another example), but no solution has been proposed in any of them. So I have 2 questions to you guys:
Any idea why it wouldn't work in a large project? I mean, there are any know issues with fast refresh related to the size of the project or the packages he includes that will make fast refresh stop working? There is any way to fix it?
Is there a convenient way to edit an internal page in the app without using a fast refresh (without running the page independently, since it depends on all the logic of the app)?
This bug really makes the development really difficult for me, and I find it hard to believe that professional developers have not found a way around this problem, Please help!
I'm using expo-cli(v3.26.2 - Expo SDK 38 that using react-native v0.62)
TLDR;
using default export with no name ALWAYS resulted in a full reload of the app without hot reload!
Details
So after a lot of months of pain, I accidentally found a strangely enough effect:
I usually write my react components in this syntax:
export default ({ ...props }) => {
...
};
and for some reason, changing a module that exports that way ALWAYS resulted in a full reload of the app without hot reload!
after months of pain, accidentally i found out that changing the export to:
const Test = ({ ...props }) => {
...
};
export default Test;
completely fixed the issue and now hot reload works perfectly fine!
I did not saw this effect mentioned in a single place on the internet!
From react-refresh-webpack-plugin troubleshoot section
Un-named/non-pascal-case-named components
See this tweet for drawbacks of not giving component proper names.
They are impossible to support because we have no ways to statically
determine they are React-related. This issue also exist for other
React developer tools, like the hooks ESLint plugin. Internal
components in HOCs also have to conform to this rule.
// Wont work
export default () => <div />;
export default function () {
return <div />;
}
export default function divContainer() {
return <div />;
}
There is an other way to obtain this weird behavior.
When you export a simple function:
//if we export this function in the entry file of the app,
//it will break the hot reload feature without any warnings.
export function someName() {
};
from the entry file of your app (with typescript template expo init nameApp the file is App.tsx)
It will exactly produce a full reload of the app rather than a hot reload.
This is vicious because on ios simulator it full reloads the app without the modification whereas in android it full reloads the app WITH the modification. So you'll take some time to realize that this is not a hot reload in android but a full reload.
IDK why ios don't display the modification like android does..
But when you think at the problem, we shouldn't export multiple things from the entry point of an app. This sounds weird isn't it ?
TLDR;
During development, I had your problem with the infinity "Refreshing..." message. As well as incomprehensible errors like "unknow resolve module 2" and "bundle error..."
Details
the solution turned out to be unexpected, I changed "require()" to "import" in the main index.js file
before
const module = require('some-module')
after
import module from 'some-module';
I recently started creating a new Vue.js app with Nuxtjs. I truly love the capabilities that it has right out of the box, but size of the app is quite large. Even when I create a completely new app with npx create-nuxt-app and only include Vuetify and dotenv is the size of this new app more than 1MB!
Changing '#nuxtjs/vuetify to ['#nuxtjs/vuetify', { treeShake: true }] does not seem to make a difference and adding extractCSS: true to the build property decreases the size of vedors.app from >600kb to <300kb. This is a big improvement, but the final bundle size is still really large. Especially because I did not add anything since npx create-nuxt-app, so the site has only 2 pages (index and inspire).
My question is, how can I decrease the bundle size, and more specifically:
how can I remove unused Vuetify components
Remove unused core-js/modules
Find other modules that are not used and remove them from the build package
I am using autoptimize plugin for wordpress speed.
When i do speed test on google insights its showing the autoptimize files in the errors.
What could be the solution for this.
I am getting autoptimize.js file as error in "Eliminate render-blocking resources"
As well in "Remove unused CSS"
PLease have a look at the snapshot and suggest some solution for this.
There should be a setting in autoptimize to inline and defer itself. That should prevent the error, because I think it will delay any non critical css and js from loading until after the initial page load. But I was just googling about a similar thing and saw a few warnings about what is and is not critical css/js being moved around, so I wouldn't trust it too much.
That css error you have showing can be addressed by either removing the import from the page totally, if that is possible, or maybe split it up and only load the smaller portion needed for that page. So if you check the inline and defer option, and remove that css file by removing the import line, you should be good to go.