We have javascript files which get bundled and compressed using the normal asp.net mvc mechanism.
We also have some javascript files which get transformed via httphandlers to deal with phrases, colour schemes, etc. At present these are simply linked in, could these be compressed and bundled but at the user level?
Unfortunately we can't group these easily, but even if we could we couldn't do it within a global.ascx file without a lot of rejigging. I mention this as it's not simply a case of having bundle1 = french, bundle2=german, etc
Compression I'm assuming could be done via IIS and static compression, but bundling?
thanks
There is no easy way to do this.
The easiest I can see is to skip the whole Bundling and Minification that is shipped with MVC 5.
Handle it yourself. Generate CSS for your user and have it go through this piece of code:
public static string RemoveWhiteSpaceFromStylesheets(string body)
{
body = Regex.Replace(body, #"[a-zA-Z]+#", "#");
body = Regex.Replace(body, #"[\n\r]+\s*", string.Empty);
body = Regex.Replace(body, #"\s+", " ");
body = Regex.Replace(body, #"\s?([:,;{}])\s?", "$1");
body = body.Replace(";}", "}");
body = Regex.Replace(body, #"([\s:]0)(px|pt|%|em)", "$1");
// Remove comments from CSS
body = Regex.Replace(body, #"/\*[\d\D]*?\*/", string.Empty);
return body;
}
Or any CSS minifier for that matter. Just make sure to include proper caching tag for your user and you won't even have to regenerate it too much.
Code taken from Mads Kristensen
Related
tl;dr. My Service Worker is caching HTML pages and CSS files in different versions. Going offline: since I have to limit the number of files I’m caching, how can I make sure that, for each HTML page in the cache, the versioned CSS files it needs are also in the cache? I need to delete old CSS files at some point, and they have no direct relation with the HTML files.
I’m trying to turn a traditional website into a PWA (sort of), implementing caching strategies with a Service Worker (I’m using Workbox but the question is supposed to be more generalist).
I’m caching pages as I navigate through the website (network-first strategy), in order to make them available offline.
I’m also caching a limited number of CSS and JS assets with a cache-first strategy. The URLs pointing to them are already "cachebusted" using a timestamp embedded in the filename: front.320472502.css for instance. Because of the cachebusting technique already in place, I only need/want to keep a small number of assets in this cache.
Now here’s the issue I’m having. Let’s suppose I cached page /contact which referenced /front.123.css (hence was also cached). As I navigate to other pages, CSS has changed several times in the meantime, and my CSS cache now might contain only /front.455.css and /front.456.css. If I’m going offline now, trying to load /contact will successfully retrieve the contents of the page, but the CSS will fail to load because it’s not in the cache anymore, and it will render an unstyled content page.
Either I keep versions of my CSS in cache for a long time, which is not ideal, or I try to purge cached CSS only if it is not required by any of the cached pages. But how would you go about that? Looping through the cached pages, looking for the front.123.css string?
Another solution might be to give back an offline page rather than an unstyled content page, but I’m not sure if it is doable, since the worker responds with the HTML before knowing what assets it will need.
The "best" solution here is to use precaching (either via Workbox, or via some other way of generating a build-time manifest), and making sure that all of your HTML and subresources are cached and expired atomically. You don't have to worry about version mismatches or cache misses if you can precache everything.
That being said, precaching everything isn't always a viable option, if your site relies on a lot of dynamic, server-rendered content, or if you have a lot of distinct HTML pages, or if you have a larger variety of subresources, many of which are only required on a subset of pages.
If you want to go with the runtime caching approach, I'd recommend a technique along the lines of what's described in "Smarter runtime caching of hashed assets". That uses a custom Workbox plugin to handle cache expiration and finding a "best-effort" cache match for a given subresource when the network is unavailable. The main difficulty in generalizing that code is that you need to use a consistent naming scheme for your hashes, and write some utility functions to programmatically translate a hashed URL into the "base" URL.
In the interest of providing some code along with this answer, here's a version of the plugin that I currently use. You'll need to customize it as described above for your hashing scheme, though.
import {WorkboxPlugin} from 'workbox-core';
import {HASH_CHARS} from './path/to/constants';
function getOriginalFilename(hashedFilename: string): string {
return hashedFilename.substring(HASH_CHARS + 1);
}
function parseFilenameFromURL(url: string): string {
const urlObject = new URL(url);
return urlObject.pathname.split('/').pop();
}
function filterPredicate(
hashedURL: string,
potentialMatchURL: string,
): boolean {
const hashedFilename = parseFilenameFromURL(hashedURL);
const hashedFilenameOfPotentialMatch =
parseFilenameFromURL(potentialMatchURL);
return (
getOriginalFilename(hashedFilename) ===
getOriginalFilename(hashedFilenameOfPotentialMatch)
);
}
export const revisionedAssetsPlugin: WorkboxPlugin = {
cachedResponseWillBeUsed: async ({cacheName, cachedResponse, state}) => {
state.cacheName = cacheName;
return cachedResponse;
},
cacheDidUpdate: async ({cacheName, request}) => {
const cache = await caches.open(cacheName);
const keys = await cache.keys();
for (const key of keys) {
if (filterPredicate(request.url, key.url) && request.url !== key.url) {
await cache.delete(key);
}
}
},
handlerDidError: async ({request, state}) => {
if (state.cacheName) {
const cache = await caches.open(state.cacheName);
const keys = await cache.keys();
for (const key of keys) {
if (filterPredicate(request.url, key.url)) {
return cache.match(key);
}
}
}
},
};
I've a Progressive web app that is added on my home screen. I've chosen standalone run type, I've a service-worker running in it.
All working perfectly, only one doubt: if I update my site (with its relative service-worker, I can see updates if I load it directly into browser, but if I launch it by home added link I see always the old site.
There is a way to request updates when launching my site in standalone mode?
I think you are asking "is there a way to dynamically update my precached assets without updating my service worker?"
Yes!
I have been working on an upgrade to the JSON cache strategy here -> https://serviceworke.rs/json-cache.html We will publish this soon!
After digging I've discovered the simple solution, I report it for others.
iOS does not support service-workers, so that is not the problem.
iOS keep in cache many resources, so the solution is to add a parameter to the various imports like so:
The best solution to ensure updates is to add an hash of imported as the parameter.
Alternatively we can use a timestamp to ensure that resources are ALWAYS updated.
To attach this parameter we can import these resources injecting them with javascript, like so
/**
* inietta uno script nella pagina
*/
function appendScript(url) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.async = false; // async false to wait for previous file loading
head.appendChild(script);
}
// create parameter with date
var currVersion = '?v=' + new Date().getTime();
// get head html element
var head = document.getElementsByTagName("head")[0];
// append script
appendScript('app.js' + currVersion);
// append css
head.insertAdjacentHTML('beforeend', '<link rel="stylesheet" type="text/css" href="style.css' + currVersion + '">');
I am building a simple blog page where I wish to use markdown as the text format.
I have a working page when running in Dartium but when I compile to js the markdown does not come out properly formatted. It's missing paragraphs only I think but headers and lists are working fine.
I'm displaying the blog post in a polymer element and reading in a simple file from the server. I have made a simple sample without polymer which seems to work fine but I haven't tried it on the production server.
The basic code is outlined below, any tips or a better way of doing this? I will eventually move the posts to a db as text but I'm open to suggestions for other ways of presenting blog posts with some simple formatting, thanks.
getPostsFromServer(){
String path = 'post1.md';
HttpRequest req = new HttpRequest();
req
..open('GET', path)
..onLoadEnd.listen((e) => printPost(req))
..send('');
}
void printPost(HttpRequest req){
var postdiv = $['article'];
if(req.status == 200){
var postText = req.responseText;
print(postText);
postdiv.innerHtml = markdownToHtml(postText);
}
else{
postdiv.innerHtml = 'Failed to load newsletter, sorry.';
}
}
I'm trying to implement some static resource improvements into my ASP.net MVC 4 project (VB.net) by changing how static resources such as javascript and css files are retrieved.
I've been following this link (ASP.NET & MVC 4: Cookieless domain for bundling and static resources ) to help accomplish this but I've come across an issue whereby unbundled javascript and css files are not rendered.
Normally when rendering .js or .css bundles you use the following:
#Scripts.Render("~/bundles/jquery")
This will then render each script tag separately in the ~/bundles/jquery bundle when in development mode, and render a single script tag pointing to the minified bundle when in production.
According to the link above, when the scripts are bundled into a single file, you can use the following line:
<script src="#Url.StaticContent("~/bundles/jquery")" type="text/javascript"></script>
This works fine for me for bundled files since the src property is valid and the StaticContent function is able to change the src URL. But when in development mode, the bundled file does not exist as no bundling takes place and all scripts are rendered seperately to the browser by #Scripts.Render and so this method does not work.
Does anyone know if it is possible to create an extension method for the Scripts helper that will accomplish what I need, or am I going to have to do something like this?
#If Misc.IsLocalDev Then
#Scripts.Render("~/bundles/jquery")
Else
#<script src="#Url.StaticContent("~/bundles/jquery")" type="text/javascript"></script>
End If
I managed to find a solution to this problem, so hopefully by putting it up here for all to see this will help others with a similar problem that I had.
Working off the same idea as the workaround I posted in my original question, I created 2 new helper functions to help generate the necessary Script and Style references in my views...
Scripts
<ExtensionAttribute()> _
Public Function RenderScripts(helper As HtmlHelper, async As Boolean, ParamArray Paths() As String) As IHtmlString
If Misc.IsLocalDev Then
Return Optimization.Scripts.Render(Paths)
Else
Dim url As UrlHelper = New UrlHelper(HttpContext.Current.Request.RequestContext, RouteTable.Routes)
Dim html As String = ""
For Each Path In Paths
If async = True Then
html = html & "<script async src=""" & url.StaticContent(Path) & GetAppVersionSuffix() & """ type=""text/javascript""></script>"
Else
html = html & "<script src=""" & url.StaticContent(Path) & GetAppVersionSuffix() & """ type=""text/javascript""></script>"
End If
Next
Return New HtmlString(html)
End If
End Function
So instead of using:
#Scripts.Render("~/bundles/jquery")
I replaced the calls with:
#Html.RenderScripts(False, "~/bundles/jquery")
A few notes on the above method...
I added an async parameter to the function call to allow me to utilise modern browser aynsc scripts.
The GetAppVersionSuffix() function call returns the assembly version which is appended to the end of the scripts source as ?v=1.2.3.4 for example. This ensures that the browser gets a new copy of the scripts and style-sheets when a new version is released.
The Misc.IsLocalDev function is a special function I use to change the way certain parts of the web application behave when I'm developing on my local machine. In this case, it ensures that unbundled scripts and styles are rendered instead of minified/bundled ones to ease debugging.
Styles
<ExtensionAttribute()> _
Public Function RenderStyles(helper As HtmlHelper, ParamArray Paths() As String) As IHtmlString
If Misc.IsLocalDev Then
Return Optimization.Styles.Render(Paths)
Else
Dim url As UrlHelper = New UrlHelper(HttpContext.Current.Request.RequestContext, RouteTable.Routes)
Dim html As String = ""
For Each Path In Paths
html = html & "<link href=""" & url.StaticContent(Path) & GetAppVersionSuffix() & """ rel=""Stylesheet"" />"
Next
Return New HtmlString(html)
End If
End Function
So again, instead of using:
#Styles.Render("~/Content/Style")
I replaced the calls with:
#Html.RenderStyles("~/Content/Style")
I hope this is useful to someone!
I have been doing some tests using Grails framework and now I'm trying to do something similar in playframework.
Basically, I want to display some pictures, but to hide (in order to be able to avoid any crawling and to be able to change the hosting ) the pictures path.
The gsp page:
<g:each in="${images}" var="img">
<img class="thumbnail" src='${createLink(controller: "images", action: "displayImage", params:[img: img.name])}'/>
</g:each>
The controller:
def displayImage() {
File image = new File(IMAGES_DIR.absolutePath +'/' + params.img)
if(!image.exists()) {
response.status = 404
} else {
response.setContentType("application/jpg")
OutputStream out = response.getOutputStream();
out.write(image.bytes);
out.close();
}
}
The html generated page it looks like:
<img class="thumbnail" src='/myhost/images/displayImage?img=blabla.jpg' />
My questions:
Is this a best way to do it ?
Regarding the performance ?
Is this slower than juste displaying the pictures using http ?
Can I do something like this in Playframework ? If yes, how ?
Thanks.
C.C.
For static and public resources most probably using raw HTTP server will be fastest solution, so I don't think it's required to "drag" it through Java controller. Actually you can do it with Play very similar, but even easier - as Play allows yo to return a File as a response body directly ie (written from top of my head):
public static Result displayImage(String imagePath) {
File image = new File(SOME_CONFIGURED_FOLDER_WITH_IMAGES +'/' + imagePath)
if(!image.exists()) return notFound();
return ok(image).as("image/jpg");
}
Anyway, you should use it only if:
You are not gonna to use additional HTTP server (remember, that Play has built in one?)
You need to bring some access control
You want to perform some operations, ie. scaling, cropping etc. (in such case, IMHO it's also better to use Play only for creating the thumbnail, and serve it with common HTTP server...)
Thank's to this approach:
You don't waste processor's resources, as HTTP server just need to serve the file which is stored on disk, instead of rewriting it to the Result.
Your app can concentrate on other dynamic operations so it's faster.
You can (and should) use typical webmaster's techniques for optimizing serving static contents, like cookie free domains, advanced caching headers etc. (ofc you can do that also within Play controller, but...)