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!
Related
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.
PROBLEM OBSERVATION
I'm trying to eagerly load the app and the it's images. In Google Chrome I can set the Ionic4/Angular8 PWA to offline. I still can browse all the pages since I loaded them lazy - AND - the PreloadAllModules is imported to the app-routing.module.ts
#NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}
However, the icons, which I use <ion-icon slot="start" name="Notifications"></ion-icon> are not prefetched and thus will not appear in offline mode (if the page was not visited before).
I do understand that prefetched images need to be set in the ngsw-config.json file, which will be turned into the ngsw.json after the build command run. That file lists all the images and other statics to prefetch.
DEAD-END APPROACHES with the ngsw-config.json
I quickly thought about prefetching the entire svg folder. That is almost half a MB.
Adding each single image to the ngsw-config.json file. Cumbersome and prone to forget new icons.
QUESTION
Is there a specific Ionic 4 approach to this that detects what icons to prefetch?
Any Angular 8 approach to this?
I'm using #ngx-translate for language handling in an Angular 5 app I'm creating. The app has two feature modules, one lazy loaded and one eager loaded.
The problem is that the translate pipe works fine in the eager-loaded module but not the lazy-loaded one. How can I fix that?
In my lazyload modules i had to add this to imports:
TranslateModule.forChild({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
also in lazyloaded component i did something like that:
import {TranslateService} from '#ngx-translate/core';
in constructor:
private translate: TranslateService
and finally onInit:
this.translate.use(language);
And it is working just fine.
I've also been struggling with the same problem and have yet to find a feasible answer.
The kind folks at Angular are working on i18n, but this may take more time.
While not ideal, you might want to check out the following article:
“How to split your i18n file per lazy loaded module with ngx-translate?” #frogeret https://medium.com/#TuiZ/how-to-split-your-i18n-file-per-lazy-loaded-module-with-ngx-translate-3caef57a738f
You can check the ngstack/translate library that works for Angular and Ionic apps. Also provides support for lazy loading, page title translations, custom pipes and many other great features.
I'm a vue.js beginner and I've been trying to integrate the Quill editor into Vue modules. At first, I tried with the vue-quill plugin but documentation is very poor and I couldn't understand how to use it. Very frustrating.
Now I don't know if I'm better off trying to create my own plugin or if I give the existing plugin a second try and maybe try to enhance it.
What I want is someone to please provide some sample working code to get this going.
Upon inspecting the vue-quill package.json file I noticed it depended on an old version of quill :
"dependencies": {
"quill": "^0.20.1",
...
}
Since I was getting fragment errors from that build I decided to take the original code to suit my needs. At this point, you can copy this modified component and use something like vue-cli to use it.
I can't give you precise steps on vue-cli because my project is based on Laravel, but the idea of storing different .vue files into a components folder should be similar.
Finally, I simply use the component in one of my views :
<quill :content.sync="content"></quill>
Note : I am still fiddling around the component that I uploaded on gist, so take it as a starting point. The code is fairly simple.
I've finished my first app using sencha touch 2.2.1. Now I uploaded it onto my server and tried to access it with my phone. Everything works well. My Dashboard contains 6 buttons, but only 1 of them is working. Each other throws the following error
TypeError: 'undefined' is not an object (evaluating 'name.substring')
The error occurs in the function parseNamespace. But I don't know what is wrong. I build the app using Sencha Architect and in the preview everything was fine. The testing package was created using the build-button from architect. If anyone could help me, the app is located here: app.ttv-rees-groin.de
Many thanks
This may be issue with class loading. The classes which are referred in the event of button events may not be loaded at the time.
Those classes may be missed when packaging application.
My experience found that Architect's build and package tools created a bloated mess of unnecessary files far exceeding what was required. Technical details: Architect 2 - all builds, Sencha Touch 2.0-2.2.x including all versions in between, Sencha Cmd 3.x
The cleanest and leanest build technique for developing in Architect was to save then fire the build using Sencha Cmd.
sencha app build
This performs the default "production" build.
The difference in output in this case went from a 32MB dump of files in the production folder with all resources, library, extensions etc, to the minimum required files totalling 0.8MB, and no longer requiring the touch library as only the classes needed were compiled into the app.
As for the error at hand, this error has something to do with class namespace, alias and xtype.
(Quick thanks to http://ruidevnotes.wordpress.com/2013/07/25/sencha-ext-js-4-common-typeerror/, saving me quite a lot of typing for these 4 things to check).
Possible solutions:
If class has controller, make sure the controller’s views config match the namespace specified on the class view’s Ext.define. Example: (controller)
views : ['namespace.of.my.View']
When using class on other view as xtype, make sure view’s alias is
widget.[customXtype]
so when adding it as an item to other viems, use
xtype : [customXtype]
Make sure view’s controller is added on app.js controllers.
When class view has no controller and you wanted to use it on other views, make sure to add the namespace of that view on
Ext.require(['class.view.namespace.name']);
and specify the xtype config instead of alias.
On top of these points, I recall an issue with list plugins, that I believe behaves identical to the error you are encountering. Prebuild - would work. Post build, issues and errors. The way I was able to get around this error was via this technique:
requires: [
'Ext.XTemplate',
'Ext.plugin.ListPaging'
],
config: {
..., // other standard configs removed for brevity
plugins: [
{
xclass: 'Ext.plugin.ListPaging',
autoPaging: true,
type: 'listpaging'
}
]
}
The thing to note is the exaggerated plugins declaration. Without this comprehensive declaration, the ListPaging plugin caused all manner of pain and chaos, and solely after a build.
EDIT: spelling.