We optimize the download of the ExtJS library to two queries
I want to share the solution that I use to optimize admin loading, developed using the ExtJS library. This solution is applicable not only directly to ExtJS, but for this library, it is very important. I warn you in advance that the solution is very bad, if not at all, working with a family of 60- and 70-year-old Internet explorer.
Almost the first thing that immediately scares most developers and customers before starting to develop on extjs is “damn, but this is almost a megabyte of javascript!?!”. In fact, the way it is, and if you include in the list for downloading files css styles and images, then you can get all a half or two. We will spice up the dish with plug-ins, which is inevitable, because there are plus extjs in this - powerful plug-ins, then many scripts are attached for a snack, each one requiring a request to the server.
As a result, each entry on the admin page requires that the client (received a free rosary) download all the scripts and scripts and design. This, sadly affects the speed of the page in the browser. And from the user requires additional patience, which does not add advantages to the karma of the developer.
')
If you thought that I would describe the way to load scripts “on demand”, which also exists for ExtJS, then no. My decision, though crude, gives me everything at once, although it imposes certain limitations.
So…
We form the list of files that are necessary for full-fledged work and combine the files of libraries, plug-ins and helpers into one big javascript file. We do the same for styles, and also form one file from them. This will reduce the number of requests from the client to the server, but not enough.
In the developer kit, ready-made all-in-one files are already attached, but it often happens that there are changes above the base library, for the most part these are styles, change fonts, then pictures. And if there are changes to the javascript code, then I recommend to describe them as a plugin for ExtJS.
Using the Data SRC URI ( http://en.wikipedia.org/wiki/Data_URI_scheme ) allows you to insert the contents of the image directly into the style file. This works well in almost all browsers, with the exception of 6/7 Internet Explorer, and in 8 Explorer there is a limit on data size. I'm lucky, I'm not like everyone else, my client scored on IE. The benefit of this decision is that the client receives all the style pictures at once and during the rendering process does not observe how gradually one or the other part of the visual components “acquires” the design. And also no extra requests to the server.
Here is the data uri in css (taken from the wiki):
And this is a goodtopic for holivar replacing css sprites, in the sense that it is also all-in-one, but at the same time, there are no restrictions like a sprite on colors (if it’s gif) or using a repeat-style picture as a background. For example, in ExtJS (2.0), the checkbox picture is a sprite, with all checkbox states. When you try to make in the grid, a column with checkboxes with a checkbox in the heading and an inscription in the heading, the sprite will show its true nature, filling the background along this caption. When I divided the image from the sprite into components, this problem disappeared.
The resulting files now need to be compressed. For this, I personally use yuicompressor . You can use any other compression program.
Usage example with yuicompressor
This compression is good, but not enough. The stunning effect is apache using mod_deflate.
The results I have about these:
After gluing: js - 1000kb, css - 1000kb (yes, yes, a lot of pictures in base64).
After compression: js - 800kb, css - 700kb.
After mod_deflate, this is what the client downloads: js - 170kb, css - 200kb.
As you can see, the size of the files is still large, but there is a certainty that the client will receive all the extjs environment in two requests: one for the javascript and the second for the styles.
The solution is the most trivial, configure apache mod_expires for these two files, so that the client downloads them once, does not download again, then the size of 500kb for downloading will not be so noticeable. And for compulsory invalidation, we will use the timestamp (type ext.1249090480.js) in the file name. With a new deployment, just change the file number and the client downloads the new version when you next enter the admin area.
To automate, I wrote a script that performs steps 1 through 3.
Published on the ExtJS forum and on Pastebin .
Problem:
Almost the first thing that immediately scares most developers and customers before starting to develop on extjs is “damn, but this is almost a megabyte of javascript!?!”. In fact, the way it is, and if you include in the list for downloading files css styles and images, then you can get all a half or two. We will spice up the dish with plug-ins, which is inevitable, because there are plus extjs in this - powerful plug-ins, then many scripts are attached for a snack, each one requiring a request to the server.
As a result, each entry on the admin page requires that the client (received a free rosary) download all the scripts and scripts and design. This, sadly affects the speed of the page in the browser. And from the user requires additional patience, which does not add advantages to the karma of the developer.
')
If you thought that I would describe the way to load scripts “on demand”, which also exists for ExtJS, then no. My decision, though crude, gives me everything at once, although it imposes certain limitations.
So…
Decision:
1. Merge multiple files into one.
We form the list of files that are necessary for full-fledged work and combine the files of libraries, plug-ins and helpers into one big javascript file. We do the same for styles, and also form one file from them. This will reduce the number of requests from the client to the server, but not enough.
In the developer kit, ready-made all-in-one files are already attached, but it often happens that there are changes above the base library, for the most part these are styles, change fonts, then pictures. And if there are changes to the javascript code, then I recommend to describe them as a plugin for ExtJS.
2. Inserting images into a style file.
Using the Data SRC URI ( http://en.wikipedia.org/wiki/Data_URI_scheme ) allows you to insert the contents of the image directly into the style file. This works well in almost all browsers, with the exception of 6/7 Internet Explorer, and in 8 Explorer there is a limit on data size. I'm lucky, I'm not like everyone else, my client scored on IE. The benefit of this decision is that the client receives all the style pictures at once and during the rendering process does not observe how gradually one or the other part of the visual components “acquires” the design. And also no extra requests to the server.
Here is the data uri in css (taken from the wiki):
ul.checklist > li.complete { margin-left: 20px; background:
url('data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD/
//+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4U
g9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC')
top left no-repeat; }
And this is a good
3. Compression.
The resulting files now need to be compressed. For this, I personally use yuicompressor . You can use any other compression program.
Usage example with yuicompressor
java -jar yuicompressor.jar --type js extjs.js
java -jar yuicompressor.jar --type css extjs.css
This compression is good, but not enough. The stunning effect is apache using mod_deflate.
The results I have about these:
After gluing: js - 1000kb, css - 1000kb (yes, yes, a lot of pictures in base64).
After compression: js - 800kb, css - 700kb.
After mod_deflate, this is what the client downloads: js - 170kb, css - 200kb.
As you can see, the size of the files is still large, but there is a certainty that the client will receive all the extjs environment in two requests: one for the javascript and the second for the styles.
4. Caching and expiration date.
The solution is the most trivial, configure apache mod_expires for these two files, so that the client downloads them once, does not download again, then the size of 500kb for downloading will not be so noticeable. And for compulsory invalidation, we will use the timestamp (type ext.1249090480.js) in the file name. With a new deployment, just change the file number and the client downloads the new version when you next enter the admin area.
link rel="stylesheet" type="text/css" href="extjs.1245678910.css"
script type="text/javascript" src="extjs.1245678910.js"
To automate, I wrote a script that performs steps 1 through 3.
Published on the ExtJS forum and on Pastebin .
Source: https://habr.com/ru/post/65930/
All Articles