In my Grails project, I use the Resource plugin to control and manage all resource files in application.
Its is embedded to my project like this:
plugins {
runtime ":hibernate:$grailsVersion"
runtime ":jquery:1.8.3"
runtime ":resources:1.2"
}
But the problem is: this plugin just loads the resource files when the most first request comes up, so it make the response of that request (in my situation is the login request) is too long. So is there any solution to force the resource plugin to run all its own necessary processes right after the application started, no need to wait for the first request?
Thank you so much.
Resources Plugin allows you to manage your resources in an efficient and modular way. Meaning you can load resources that are required for each pages. If your resources are taking too long maybe you are loading unnecessary css,js on your login page.
Couple approaches you can take:
Optimize your resources. Use only what you need. In you SomethingResources.groovy, you can bundle your resources and load each bundle when needed. For example, required only css,js needed for login.
Use zipped-resources and cached-resources, or yui-minify-resources plugin. They help you to transfer or load resources faster.
Resources plugin allows to load resources in different part of the page, sometimes loading js files at the end of the page, simulates a faster loading page. disposition
Btw, Resources plugin pre-process css, js files at the start of your application, however unless there is a request from the client browser, resources would not be transferred to client. Optimizing them help to ease this transition.
I hope this will help
Related
Currently, I have fresh installation of vuejs app with some test pages and components. All my routes and components are using dynamic imports to load js chunks only when user goes to a particular route or a component is rendered and it is working fine in SPA and SSR mode. The problem occurs in PWA mode when it prefetches all chunks at start.
I have tried 'exclude' function but it still pre-fetched the file.
Is there a way to exclude complete routes e.g. /admin to be pre-fetched? As this is only for internal use and not needed for offline usage.
We are using webpack + workbox bundler.
Any help would be highly appreciated.
I edited your question's title to match what you're actually asking. I hope I got it right :)
Yes, that's possible. You can exclude a lazy loaded chunk ("route" or "page" or whatever) from the asset list to be precached.
I assume you're using Vue CLI based project. Look for the PWA config options here https://cli.vuejs.org/config/#pwa. It will lead you to whole config of the Vue CLI PWA plugin here https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa. That will tell you how to pass any options to the underlying workbox-webpack-plugin. What you need is the excludeChunks option, described here https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#full_generatesw_config.
I have at least 15+ javascript libraries & references in my MVC web application project. For each of these libraries they are independently bundled and minified. This means that when a page is requested the client browser is having to make 15+ connections to the server to retrieve resources.
Would it be considered bad practice to bundle all of these related files into a maximum of say 5 bundles so that the number of requests is kept low even though the scripts have nothing to do with each other and are completely unrelated?
Normally we would end up with few bundles. Some are
put all the scripts which are used again and again on ifferent pages as common.js
page type specific bundles, like in an eCommerce site we would potentially have productpage.js and checkout.js
I have a small JS library in my MVC 5 project that I want to be available for external users to load into their apps. At the moment I'm bundling it like so:
bundles.Add(new ScriptBundle("~/clientApi")
.IncludeDirectory("~/Api/clientapps/", "*.js"));
I can then access the bundled library via browser at the path /clientApi.
However, it's always minified, even though I've set my web.config debug=true, and other bundles in my own app are included as non-minified.
How can I make the file/s in the bundle available as a non-minified bundle file?
If you access /clientApi directly then yes it will be the bundled/minified version.
The debug=true option effects your script reference in your own .cshtml file. When debug=true, references to the individual script files are rendered to the client (so the client doesn't use /clientApi at all).
When debug=false, then a reference to /clientApi (with the version query string) is rendered to the client instead, so they get the bundled/minified version... If you give that link to these external users, then that is what is going to get rendered.
That path doesn't care if it is debug or not. It's not like /clientApi is going to bundle but not minify the files depending on your compilation settings... it's just either your app is going to render the bundled/minified path or the individual script paths.
If you want to do debugging/testing in external apps, then they will just have to use the individual script paths.
Even if you do give these external apps the /clientApi reference once testing is done and they are ready to use the bundled/minified version, it doesn't explain how you are going to handle versioning. If you update a script, how will they know to stop caching?
Actually you can serve the bundle unminified if you disable the transforms of the Bundles
protected void Application_Start() {
BundleTable.EnableOptimizations = true; // Force bundling to occur
// If the compilation node in web.config indicates debugging mode is enabled
// then clear all transforms. I.e. disable Js and CSS minification.
if (HttpContext.Current.IsDebuggingEnabled) {
BundleTable.Bundles.ToList().ForEach(b => b.Transforms.Clear());
}
}
I am working on minifying js and css files in grails application. My original plan is to use the resources plugin to minify the resources (also had a look at jawr and performance-ui, but resources seems to be de facto standard these days).
Resources makes it easy to minify individual CSS files using YUI, but we have over 40 JS files, which we'd like to concatenate into a single file (and the files will need to be concatenated in the right order too) I haven't seen anything suggesting that Resources supports this out of the box, these are the approaches we have planned so far :
Add new grails taglib to concatenate the js and css files to create one js and one css file and minify using the resources plugin. A naive implementation will mean the yui-minify runs every time the page is served (!!) so we'd need to inytroduce caching somehow.
Use the BuildConfig 's grails.war.resources to minify the js and css. This would get round the caching issue, as the resource would only bebuilt and minified at build time, but will require us to use grails run-war to test locally, hence any minification-related errors won't get caught until later in the dev cycle.
This must be a fairly common problem. What are other people doing? Would like to hear about any other approaches or best practices I can use.
You can make all your resources using the same bundle, with this, you will have only one merged js. Example:
main {
resource id: 'mainjs', url: 'js/main.js'
defaultBundle: 'mybundle'
}
second {
resource id: 'secondjs', url: 'js/second.js'
defaultBundle: 'mybundle'
}
According to the docs:
The "bundle" mapper adds together resources of the same type to reduce
the number of files your client pages request.
The "bundle" mapper looks at the value of the "bundle" property on
resources and if found, will add the resource to a new synthetic
aggregated resource.
This aggregated resource is itself processed through mappers, so it is
subject to the other optimisations you apply to the kind of resource
the bundle is aggregating.
Bundles are always in the base directory of the static resources
folder - which means references to files inside the bundle must be
re-adjusted so they continue to refer to the same files. This is made
possible for CSS files by the csspreprocessor and cssrewriter mappers.
I am using Grails 2.0.1 in my website. Everything was fine until I installed grails ui-performance plugin into my website.
When I am deploying war with this new plugin the css files cannot be accessed. The web pages are rendered without the css and when I "view source" the page and try to access the generated url (versioned) of the css files I get the following error in firefox
"The page you are trying to view cannot be shown because it uses an invalid or unsupported form of compression."
After installing this plugin I have only changed the way I call the css to my page.
Like this:
<p:css name='main'/>
<p:css name='style'/>
Am I missing something. Please help
Uninstall one of them. Either don't use UI Performance, or remove resources by deleting the line in BuildConfig.groovy that declares the dependency. Note that there are plugins that work with resources and add in functionality like what UI Performance has, so one option is to keep resources and uninstall ui-performance, and add one or more of these to BuildConfig.groovy
runtime ":zipped-resources:1.0"
runtime ":cached-resources:1.0"
runtime ":yui-minify-resources:0.1.4"