I am running a proof of concept for a Vue.js being served by a microcontroller. In this case I have a single filesize limit of around 100 KiB. When I run "node run build" I get multiple chunks for the JS files, because I set the parameters inside the webpack configuration part. But my application css file has a size of roundabout 233 KiB.
Is it possible to split the large CSS file into multiple smaller ones?
I am using the Black Dashboard template from Creative Tim.
So theres one scss file in which multiple scss are getting imported.
Thank you all in advance!
Tried to reduce the size of the css, but most parts are needed. Tried to find plugins for doing the described file split task, but didnt find one.
Edit: Focus is not on load speed :)
Related
I've just inherited a large React project. I do not have much experience with React but I'm trying to make some improvements where I know how.
One issue we have is that our main CSS file is huge and one of the main reasons for this is that a bunch of images used in background-image properties have been embedded as Data-URIs despite them being set to relative URLs in the original SASS files.
These images are used multiple times throughout the app and so we end up with a final CSS file that has the same images embedded multiple times!
The application is built using react-scripts build which I believe is the culprit. As stated here:
To reduce the number of requests to the server, importing images that
are less than 10,000 bytes returns a data URI instead of a path.
I don't want this. Is there a way I can disable this? The project isn't using Webpack or any other build tool/bundler. All I have is the scripts in package.json to play with.
I'm not sure if you can do this with a simple toggle, since create-react-app isn't very customizable by design.
In order to change any configuration you'd like, you have a couple of options:
Forking the configuration (https://auth0.com/blog/how-to-configure-create-react-app/), which allows you to modify the configuration but still stay within create-react-app's boundaries.
Ejecting (https://facebook.github.io/create-react-app/docs/available-scripts#npm-run-eject) which will irreversably give you full power over the build configuration (which means you also have to maintain it going forward).
I have two large projects, each project has a relatively simple web front-end with multiple themes: different colors and fonts. These themes are the same across projects
One of these projects uses scss and the other uses less. Neither are my strong suit and i am not allowed to make them use one or the other in both places. What i would like to do however is have a shared folder with a file for each theme which could hold all the variables for that theme.
This would allow me to avoid duplication and make maintenance slightly easier, while promoting consistency between the two projects which must have the same colors and fonts between them. Is there a relatively simple way of doing this?
You should read the SASS and LESS documentation. You'll see that SASS and LESS although similar both have different ways of declaring variables. So Importing a LESS file to a SASS file, and vice-versa, will not have the result you expect.
I would suggest, since it's an easy change, adapting the LESS file to a SASS file or a SASS file to a LESS file and create the base for what you want from there.
I have a website which uses 1 css file, it is called body.css and it consists of 841 lines. Should it be sorted in different files (header.css, footer.css page1.css, etc...), is it better in just 1 file or does it not matter?
The only thing I know for sure is sorting it in more files is a lot more readable.
Also if someone answers this I'd be most grateful for a little explanation.
My opinion would be one of two things.
1) If you know that your CSS will NEVER change once you've built it, I'd build multiple CSS files in the development stage (for readability), and then manually combine them before going live (to reduce http requests)
2) If you know that you're going to change your CSS once in a while, and need to keep it readable, I would build separate files and use code (providing you're using some sort of programming language) to combine them at runtime build time (runtime minification/combination is a resource pig).
With either option I would highly recommend caching on the client side in order to further reduce http requests.
So, there are good reasons in both cases...
A solution that would allow you to get the best of both ideas would be :
To develop using several small CSS files
i.e. easier to develop
To have a build process for your application, that "combines" those files into one
That build process could also minify that big file, btw
It obviously means that your application must have some
configuration stuff that allows it to swith from "multi-files mode" to "mono-file mode".
And to use, in production, only the big file i.e. Single CSS
Result : faster loading pages
maybe this will help you..
For optimal performance it is better to have only one css file.
But for readability it would be better to have different files for different parts.
Take a look at tools like SASS, which help do that without sacrifice performance. Additionally it has features to make your files even more readable by introducing variables, function and much more.
Using more files means more requests. It will take more time to load and make unnecessary requests to the server. I'd stay with one file.
The only good reason to have other css files would be if you have third-party components, to keep them separated and be able to update them easily.
The order matters: Rules loaded later will override rules with the same name loaded before (this is valid even for rules in the same file).
What do you mean that your website uses one CSS file? Normally you'd write your style definitions in multiple files, and they are concatenated (or not) into one file. My point is, what you are working on in your development environment should stay modular, readable, it shouldn't be influenced by what you have in production.
As for the order of the CSS files, yes, it matters, as you can overwrite your previous definitions.
For optimal caching I'd recommend you to build all the vendor CSS in one file, and your CSS in another file, versioned, so that if you change something in your code, only that file has to be updated by the browser.
But these things depend on the infrastructure. As the browsers are able now to send multiple requests simultaneously, having multiple files can lead to faster page load than only one. But I'm not sure about this.
you might want to take a look at gulp to automatically optimize, and minify your CSS code.
All css in one file is OK.
But it's free : you can make as many css file as you want.
However usually this is how it is:
1 global css file for the entire page. You put the common css in here that is useful for every page on your site. You can call it app.css or style.css or mywebsite.css or any name you want.
1 specific css file for a specific page when you want to specially separate this css from the global css file. Because it will contains css only useful for a few pages. For example you have a special component made by your own or a special functionnality. Example : you have made a spcial javascript code working with some html for uploading some file and you want to have your code js/css separate.
Usually, you can also have one css page for each page, but always one global css file for the entire site.
Note : Same question is also valid for javascript
Note 2 : You can also think about using a framework to minify your javascript and css into one single css / js file at the end. At work our technical boss use wro4j which works for java but it should exists many more other frameworks as you can search on google.
Im using W3TC with minify
Im detecting that css and js minified files takes a lot to load, blocking the following elements in the waterfall.
If i use other minification plugin, like head cleaner, those minified files load instantaneously with no blocking at all
Regular uncompressed css and js files are loaded with no blocking nor waiting neither
I don know if the problem is related to number of files minified (can i limit the number of files to minify?) or its related to not limiting the number of characters in file name.
Could this really be an issue loading minified files?
Here is an example of the tests:
http://gtmetrix.com/reports/www.externateam.com/eeQZ0MXm
Since i have no clue, any approach would be awesome
Thanks and best regards
W3total cache has this issue where the character limit is added. So every file is, infact, separated through comma and loaded to the url for instance.
I am not sure about the orignal format, but it looks something like this: www.example.com/wp-content/plugins/w3total_cache/wp-content/themes/js/jquery.js,wp-content/themes/js/bootstrap.js
Its fine for a few files but as the number of files grow larger this becomes a mess. Some servers done allow more than a few hundred characters to be added.
I have seen the link you shared, these files are separately loaded, and this is what has to be expected.
The only ways to get rid of the blocking time is:
by either combining all the files, there is an option in w3totalcache.
Or using an async defered blocking (which is also available in w3totalcache).
But async method doesn't always work perfectly for every theme. If you dont have a well developed theme you will really have a hard time getting this one to work.
IE 8 and lower has a limit to the number of selectors allowed in a single style sheet and once the limit is reached the style sheet needs to be split. Apparently someone addressed this in Compass by creating a way to have Compass do this automatically, and created a gist about it. I however don't have the skills to know what the next step is and there is little in the way of documentation on what to do with this code. Can anyone help with how to integrate this into my Compass install?
Ref: https://gist.github.com/1131536
Thanks much!
Create css_spliter.rb file (as described in your Ref) beside your config.rb file, at the root of your sass project.
Add the following line at the beginning of your config.rb file
require 'css_splitter'
And add the 3 following lines at the end (of config.rb)
on_stylesheet_saved do |path|
CssSplitter.split(path) unless path[/\d+$/]
end
Then run compass compile as you usually do. You won't see the files *myFile_2.css*, *myFile_3.css*, ... appear in the logs but they are well created in your css folder. Also the command compass clean won't remove them, you'll have to dele them manually from your css/ folder.
For what it's worth, there is a Node.js app called Bless that will provide you this functionality. It can run server side or on your local machine.
If you happen to be using CodeKit to compile your Sass/Compass files, it's baked in, you just have to enable it in project settings.
I think the css_splitter solution forgets to remove the code from the first file. Now I have 2 files, the first one is all of my css and the second generated file has the 2nd half of the original file. So I have 150% the amount of CSS as I used to... I did fix my problem in IE though :)