I have been reading about leveraging cdn to boost the speed of web application. I am developing a react application and I am using stylus for css. My current structure of project is something like this: Each component or page has it's own seperate local stylus file. So this way I am trying to keep the syles isolated for each component so that it is easy to maintain. But mostly all the stylus files has around 1000 lines of code which is common for all the stylus files. This brings down the speed of my application while it loads. I am thinking of putting the css on cdn. This way it will be faster I am assuming. How can I do it with my present project structure?
Right now I include stylus like this in each component
import c from "./reviews.styl"
render() {
return (
<div className={c.container}>
If I create a seperate css file as sugegsted in answer to include all the common css, how will I say to each component to use that common.css file. Each component is already using the imported stylus file like I shown above
You have a few ways here...
In the constructor you can append a link tag to the head
In componentWillMount you can append a link tag to the head
e.g.
document.getElementsByTagName('head')[0].appendChild('<link rel=stylesheet href=mycdn.com/mystylesheet.css />');
I'm not saying moving your CSS to a CDN is a good solution, but this is how you'd accomplish it.
The benefit of a CDN is that your static web assets are deployed across the world on multiple servers and your users can easily retrieve quick copies of these assets. In the case where you are using a file like jquery-x.js, users may already have retrieved the file from the CDN for another website and even on the first page load, they can use a cached copy.
Your biggest issue is the duplication of CSS code throughout each component's style page and that can be overcome by just creating a generic style sheet with the common styles (say "common.css") and then including it in each component. You don't have to use a CDN to achieve this and you can investigate CDNs after you first get rid of the duplicate CSS as another way to speed up your page load.
Related
We have recently switched to a React SPA site. From the old site, we have some documents (invoices, quotes) that we generate as HTML files that we then print as PDFs. These templates are designed by a third party and have their own separate CSS files that have nothing to do with our React SPA's CSS. After the shift to React, I added some of the templates as React-friendly modules and converted their CSS to JSS. It worked but only partially as a lot of styles are overridden by the React SPA's CSS so the results are not consistent. We don't have the resources to redo all templates from scratch and this isn't something that we should be doing anyway - ideally, we want to be able to just load in the CSS that we get from the designer and only play around with the HTML/JSX (happy to use a tool to convert CSS to JSS but no custom editing). Is there a way to somehow ignore/unload all app CSS when loading a specific page, and only use a specific CSS/JSS file (in our case makeStyles), then bring it back to normal when another page is viewed?
By default Gatsby drumps all the css required on a given html document into its header making css caching impossible:
import "./foo.css"
import "./bar.css"
results in:
<style data-href="/styles.f6ce41623bc6fbf912c0.css">
.foo{color:green}.bar{color:orange}
</style>
/styles.f6ce41623bc6fbf912c0.css contains exactly that stylesheet.
is there a way to keep foo.css and bar.css in separate files without loosing the ability to minify and autoprefix everything?
The functionality is called bundling, and Gatsby uses Webpack to do it. You could alter the Webpack configuration, but I’d say there is really no point in doing that.
Bundling and code-splitting resources is a crucial part of why Gatsby is so fast. By bundling the CSS for every page makes sure that only resources required by the current page are loaded. Gatsby also caches all of the resources it has loaded, so you don’t need to worry so much about resource economy.
I found a code snippet from a Gatsby issue comment, which replaces inline <style> elements with <link>s, but I wouldn’t recommend doing that without going through some performance measurement.
I'm trying to refactor a nodeJs project and my css is in my .ejs file. I need to put some dynamic data in my css file. I need to have dynamic data in my css, when my css is in my EJS file it's good.
But when I put my css into an external file, nothing happens!
So, how can I inject ejs tag in my external stylesheet file?
This is one of the questions to which one has to ask you - why do you want to do that? You are asking about a solution to a problem that you didn't describe.
By suspicion is that you are trying to use a templating system for something that could be done with a CSS preprocessor like Sass or Less. Particularly Less can be easily used on both the client side and server side. See http://lesscss.org/#client-side-usage
Now, if you really want to use a templating system created for HTML to generate CSS then you will have to take few things into account: You need to store your CSS templates somewhere where your HTML templates are stored, not where you store your static assets like images. Then, your server will have to serve your generated CSS with a correct MIME type. Then, your HTML will have to reference the styles using a URL to your generated CSS that will be generated on every request instead of being served directly from disk.
jsDelivr ( http://jsdelivr.com ) has Multiple File mode:
https://github.com/jsdelivr/jsdelivr#load-multiple-files-with-single-http-request
Problem is, libraries with CSS such as Gritter and Font Awesome use images in their interface components.
This leads to 404 errors when doing something like this:
//cdn.jsdelivr.net/g/jquery#2.1.0,bootstrap#3.1.1,summernote#0.5.0,mousewheel#3.1.6,jquery.timeago#1.3.0,jquery.gritter#1.7.4,jquery.unveiljs#1.0,jquery.waypoints#2.0.2,bootstrap.tagsinput#0.3.9,bootstrap.datepicker-fork#1.3.0,jquery.jqote2#0.9.8,portal#1.1.1
How can we use multiple libraries off the one CDN pageload, but change the paths CSS files reference to use the appropriate jsDeliver.net URI?
Is this a job for post-processing CSS in-browser, by jQuery or pure JavaScript, or is one forever doomed to one CDN pageload per CSS file referencing images, plus one remaining pageload for the CDN served CSS without image references?
Yes, unfortunately /g/ does not work with files that contain relative paths.
You can load this kind of files individually and use /g/ for the rest of them normally.
I know that there are questions regarding this same topic, but for HTML. What are some good conventions in regards to using external stylesheets in a Flex app.? How would you break up the stylesheets (names of stylesheets and what they include)?
Flex compiles the external CSS file when you publish your project.
There is a way to load CSS at runtime using Flex; it can be done by compiling CSS files into SWF files and load them at runtime using StyleManager.loadStyleDeclarations.
See the LiveDocs on Stylesheets at Run Time for more info.
Some conventions we use in organizing stylesheets:
Have one main.css stylesheet that holds all of the data for skinning the base application.
Have one fonts.css stylesheet to store all of the fonts in the main app, because these can get quite messy.
The main.css stylesheet is included in the main swf via the <mx:Style source="main.css"/> tag. We load our app with as little as possible, and once everything is loaded, if we need to immediately show some text (sometimes we just have a video playing if it's an advertising site), we fade/tween in the main elements and load the fonts.css via StyleManager.loadStyleDeclarations at runtime.
If we have an admin panel, we have an admin.css stylesheet which we load at runtime because the main app doesn't need it.
We don't need to divide up the CSS anymore than that because we usually create a whole set of skins in a Theme, so the stylesheet is just applying those skins to components and is pretty lean (using Flex 4). I tend not do divide stylesheets into anything smaller (like "pages.css", "comments.css", "popups.css", or even "controls.css", etc.) because it would be overkill and too much to manage for little in return. That's common with HTML, but that's because HTML requires CSS for nice presentation; Flex could do without CSS entirely.
When developing, one of us usually develops most of the skin right away (having a default wireframe setup, like those found on ScaleNine as they do the photoshop/flash/after-effects. There's no way to not have to recompile the css swf if you make changes. But if it is loaded at runtime, you only have to recompile the css file and not the main swf, which is useful but not really useful during hardcore skin development.
I tried keeping the main stylesheet separate during development (in a custom Theme), and it made development a LOT harder, because I had to recompile the css separately every time I made a change and sometimes I had to recompile the main app too, and there were strange and hard-to-track-down bugs, etc. Then I was compiling two different apps. So I recommend keeping the main css file part of the main app.
If you wanted runtime css without having to recompile anything, try Ruben's CSS Loader and check out the source. But that would come at a runtime performance cost.
Flex is not something I've dealt with, but I did some research. It looks like the code to call a remote stylesheet is this:
<mx:Style source="com/example/assets/stylesheet.css" />
Flex Quick Start: Building a simple user interface: Styling your components says this:
Note: You should try to limit the
number of style sheets used in an
application, and set the style sheet
only at the top-level document in the
application (the document that
contains the tag). If
you set a style sheet in a child
document, unexpected results can
occur.
The implication of this seems to be that multiple stylesheets are not really possible. It sounds like what you want to do is organize your stylesheets, check out Organizing Your Stylesheets and Architecting CSS for some ideas for approaches. It looks like you have classes and basic tags, but the W3C stylesheet specifications are different from the Flex stylesheet specification.
As a non-Flex developer, Namespaces looks interesting as a way to organize namespaces: How to use the new CSS syntax in Flex 4.