Google Chrome audit reports that jquery_mobile.css takes 904 KB (minified) and 87% of it is not used in the current page most pages in my web app are similar. I wonder if there is a simple way to clean up that file and remove all the styles that are not used to save data transfer.
Any ideas?
There is no simple way since jquery ships with a huge number of controls. You would be the only one who knows which ones you are using and which ones you are not.
The only way I see to reduce the size of your CSS is to use the github repo https://github.com/jquery/jquery-mobile/tree/master/css and just pick the CSS files for the components you are using.
That would mean having to get the updates manually when there is a new release rather than just dropping the CSS file from the latest release.
Related
I always see these few files under the Scripts directory:
ai.0.22.9-buildXXXXX.js
ai.0.22.9-buildXXXXX.min.js
jquery-[version #].min.map
According to this answer, I can wipe out the Scripts folder. But I usually leave these 3 files alone, because I am afraid of bad consequences.
So What are the purposes of each file?
Microsoft Application Insights JavaScript SDK
Application Insights tells you about your app's performance and usage.
By adding a few lines of code to your web pages, you get data about
how many users you have, which pages are most popular, how fast pages
load, whether they throw exceptions, and more. And you can add code to
track more detailed user activity. ai.0.22.9-buildXXXXX.min.js can be
removed if you dont need to view site statics
For more details on how to use it
jquery-[version #].min.map
It is used for Source Mapping
Consider when you start debugging and you are on the particular line.
And you press (F11 or Click Step into Next Function Call), the
debugger tool will take you to jquery.min.js. And looking at jquery
minified version, it is impossible to find out the error. But with
source maps, you can let the browser’s debugger "map" the lines in the
compressed file into the uncompressed source. For Source map to work
successfully, two things are required.
1. Value of sourceMappingURL exists on your server or locally.
2. Browser Support
For further details
if you don't need it you can remove it
ai.*.js files are for Application Insights. Not required and can be removed, unless if using Application Insights.
*.map are for debugging purposes of JavaScript files. I doubt it will be necessary to debug the jQuery plugin. Not required and can be removed.
I'm ASP.NET MVC v4 for my application, and I'm using the web optimization features (bundling and minification of scripts and styles).
Now, what I understand is (please correct me if wrong), the optimization framework will look at the included files at the time of compilation and configure them. It'll create a version number (v=something) based on the contents. Every time the contents change, it'll recreate the version hash, and the client will get updated files.
Now, is there a way to get the following done
[1] Update something inside a js file in my server, and serve the updated one to the clients without re-building & re-starting the application (I'm not changing bundle configuration here, just updating file content inside a script) ?
[2] Update the script configuration itself (e.g. adding a new script to a bundle), and get that served to the clients without Re-compiling & Re-staring the application? Or, at least without re-compiling? (I know, generally we define the bundles inside cs files, but wondering if there is a way out!)
[3] Is there a way to use my own version number (say from a config file, v=myCustomScriptVersion) rather than the auto-generated version hash?
It's bit late, but I'm just sharing my experience on my own questions here.
As discussed in the comments of the question, bundles are defined as part of a cs file (generally BundleConfig.cs inside App_Start). So, the bundles are defined at compile time, and at application start they will get added to collection and become usable.
Now, the interesting bit. At run-time, the optimization framework looks into the included files and creates a hash of the contents, and appends that as a version query-string to the bundle request. So, when the bundle is called the generated uri is like the below one.
http://example.com/Bundles/MyBundledScripts?v=ILpm9GTTPShzteCf85dcR4x0msPpku-QRNlggE42QN81
This version number v=... is completely dynamic. If any file content within the bundle is changed, this version will be regenerated, and will remain same otherwise.
Now to answer the questions,
[1] This is done automatically by the framework, no need to do anything extra for this. Every time a file content is changed, new version number will be generated and the clients will get the updated scripts.
[2] Not possible. If files included in a bundle are changed, is has to be recompiled.
[3] Yes, it can be used. The custom version number can be added as below.
#Scripts.Render("~/Bundles/MyBundledScripts?v=" + ConfigurationManager.AppSettings["ScriptVersion"])
But Caution! This will remove the automatic versioning based on file contents.
And, additionally, if there are multiple versions of the same file available and we always want to include the latest version available, that can be achieved easily by including a {version} wildcard in bundle configuration like below.
bundles.Add(new ScriptBundle("~/Bundles/MyBundledScripts")
.Include(
"~/Scripts/Vendor/someScript-{version}.js"
));
So, if there are 2 scripts in the /Scripts/Vendor folder
someScript-2.3.js
someScript-3.4.js
Then the file someScript-3.4.js (higher version) will get included automatically. And when a new file someScript-4.0.js is added to the folder, that will be served to clients without any need for recompile/restart.
I am trying angular.dart. When I compile dart to js it generates a single file which is containing my dart code and whole of angular and may be other libraries also. The problem is file size becomes too large ( 1.5L+ lines ). This also means whenever I will make even a small change in my file, whole js file will be changed and hence can't be cached. Is there a way by which I can have different js files: 1 for my code, 1 for angular and for other libraries.
How do you guys slove this problem ?
The amount of lines has nothing to say about the file size. Is the file really to big?
You could use DefferedLibrary to split up your application into multiple files, but that won't help you as the file are coupled very close to each others and change both after recompiling (due to tree shaking). But this can help your load time as parts of the application can be loaded later on demand.
But if your application is really to big and have slow load times, you may take a look into the MirrorsUsed annotation to exclude mirrors information for parts of your application.
Basically I need to send to my designer a non-finished rails website.
My Designer doesn't have ruby / Rails environnement installed and should be able to:
modify the CSS
add some html elements
I can manually check the diff after he worked.
Is there a way that I can make an easy extraction of my app or giving an access to the deployed one with capacity to re-root the css from his files?
Based on your question, your designer, in addition to the design, also writes code: he creates css files, and edit your views files. That makes him an integrator.
As such, he should learn the basics of source control management, such as git, svn or any system you prefer (my favorite is Bazaar, for its simplicity).
It is a best practice that will allow you to save some time and avoid a lot of headaches when merging your revisions. A nice side effect: he will be able to easily roll-back to a previous working version of the code, should anything bad have happened.
Wondered if anybody knows how customizable Flash swf files are made, where there appears to be a template swf that the user can then input some changes (eg text or image) and receives a newly-compiled swf file with their changes.
Some examples:
- http://flashfreezer.com/landingconfetti/index.html
Constraints:
- user receives a single output swf file that can be played with all their changes included. ie there is no reading from an xml file, or using Flashvars.
Been trying different things for a few weeks with no luck!
There are a number of ways, but generally the most common is to either use a SWF generating library (like PHP's) or through server-side compiling.
Normally, this will be a custom or proprietary library which uses the same language that the serve is running (and there are open-source libraries for this in PHP, Perl, Python, Java, C++... etc). The SWF is generated and served up with the appropriate headers so that the browser knows how to re-direct it. Often this will involve a pre-defined template which is then modified slightly for the new input. Only occasionally does this involve the manipulation of pre-generated SWF directly.
The other option is to have a command line call to the Flash IDE or the Flex compiler (and, technically, this can work for CS3 and CS4, though in a very nasty and hackish way) to generate a new version of the SWF on the fly. This is often slower, but it will generally yield a more finished feel to a product.
You could try Swiffotron. It can modify SWF files and do text replace type things on both text elements and in compiled actionscript.
Here's a swiffotron xml job file that does some text replacing.
And here's a swiffotron XML job file that modifies instances on the stage.
I didn't check the site, but the only way I can think of is to read the requirement details through flash (this can be done through plain html also) and then generate the AS files from their templates and compile them at the server side (using mxmlc or other compilers) and give back the SWF.
I get the impression that you're looking for SwfMill. SwfMill creates a swf based on an XML file that you create/define. You could use SwfMill on the server to generate a swf based on user input.