Nodejs in Visual Studio Code 11. Front-End engineering optimization

1. Start

With the development of Internet technology, enterprise application everywhere is b/s design, I was fortunate to experience a lot of projects have ASP, there are html/js, there are Silverlight, have flex. Unfortunately these projects rarely focus on front-end optimization issues, but will all 100% of the performance focus on business design, third-party platform, database and so on, but I would like to say that as long as 1% of the energy, do some front-end optimization work, can greatly improve the system access efficiency.

I've seen some projects. Load html,js,css,xap and other static resources with 1-2 seconds, core services 2-3 seconds, and finally spent half a month to optimize the core services only 0.5S, the internet has long been a solution to the static resources within a day to optimize the load optimization to within 0.2S.

When mastering this skill, it's so easy to use, I can only say that with the help of node. JS, the front-end engineer is really a bunker.

2. Front-End optimization

304: When the same resources are accessed again, often the return resource is 304 of the status code, indicating that the resource is not modified, while the body is empty, reducing the bandwidth used in the transmission.

　　Fromcached: Some resources set maxage so that the browser saves this resource in the browser cache folder and is no longer accessible when the same resource is accessed again.

The core of the front-end optimization is the cache, which caches all static resources (JS,CSS) on the first visit, and when the user accesses the site again, loads the static resources directly from the cache, reducing the HTTP request and speeding up the system load.

What is 304?

Without that worry, IIS has already defaulted on the 304 rule, opened fiddler to monitor the site under IIS, refreshed the Web page, and all static files published in IIS are 304 requests.

What is fromcached?

is an HTTP response header, which can be set directly in IIS.

304 or fromcached?

　　Fromcached faster, 304 or to access the network, now the network bandwidth is increased, but our TCP protocol is the most afraid of losing packets, the packet loss rate is difficult to continue to optimize the time, fromcached almost burst 304.

fromcached How to update the code?

All HTML pages should not be fromcached cached, only cached js,css. There is an update when the referenced address is modified in HTML such as

<link href= "Assets/default_5a33cd6.css" rel= "stylesheet" >

Because each update uses a different static resource address, the low-version static resource is automatically invalidated.

　　A further explanation: HTTPS://GITHUB.COM/FOUBER/BLOG/ISSUES/6

Are there automated build tools?

Our system has dozens of HTML, if you want to manually change, this update frequency, the design of this program will be sprayed dead by developers. Fortunately with the FIS.

3.FIS

　　FIS represents a system, first to meet its catalog specifications, and then proceed to the next step.

What is the catalog specification for FIS?

The development of a site will generally refer to third-party class libraries (jquery,bootstrap, etc.), write some of their own projects on the use of js,css,jpg, these static resources need to follow the specifications of FIS to partition the directory.

It is not recommended to use FIS to manage third-party libraries, and third-party libraries are published under a unified static site.

So it is recommended that your directory should look like this:

Assets is used to store all of the static resource files such as Css,js,jpg, which are written for the project, Libs used to store third-party class libraries

Index.html should look like this.

<! DOCTYPE html>
Configuring the FIS Publishing Program
Publish the site and configure the Fis-conf.js file
Fis.config.init ({project: {Md5length:7}}), Fis.config.merge ({roadmap: {path: [{                Find all files in the assets directory reg:/^\/libs\/(. *)/I,//Generate new URL '/static/xxxx '            URL: '/static/$1 ',//specified file does not produce MD5 stamp usehash:false, Release: '/static/$1 ' }, {//Find all js,css,png files under the Assets directory reg:/^\/assets\/(. *\. (?: js|css|png)) /I,//Generate new URL '/myappassets/xxxx ' url: '/myappassets/$1 ',//js/css/png MD5 tag Generate to/myappassets/xxx directory release: '/myappassets/$1 '}, {//            The. html file in the root directory reg:/^ (. *\.html)/I,//Publish to/myapp/xxx Directory release: '/myapp/$1 '                }, {///other files not matched by the preceding rule reg:/.*/,//compile without producing     Release:false       }        ]    }}); 
Open cmd to navigate to the directory and execute the command
FIS Release--md5--dest. /output
　　
Project is output to: In the/output directory
URL address automatically changed, their own index.js and Index.css MD5 code has been automatically added good, third-party class library and not add MD5 code, all OK, take out the release bar.
You can now cache all the dynamic files without worrying about updating the issue.
4. End
FIS is very useful, but the problem of our project is still complex, the project on the system loading framework using IFRAME, will cause the third-party class library to load repeatedly, in order to avoid the repeated loading of this situation need to refactor it into a multi-page HTML of the SOE framework, but the use of multiple pages can not be repeated copy Header and menu HTML code bar, of course you can use the back-end rendering engine such as swig, fortunately Grunt+fis can easily help you to solve this problem and avoid using the backend rendering engine, the next article will explain how to quickly reconstruct the IFRAME page for multi-page HTML.
　　
Nodejs in Visual Studio Code 11. Front-End engineering optimization