Installation and use of FIS2

recently, in the study of the optimization of mobile projects, I have inadvertently learned FIS , feeling FIS The optimization of static resources is still very good. ... so I have the following content ... O (∩_∩) o haha ~

Fis2 The document address:

Http://fex.baidu.com/fis-site/docs/beginning/getting-started.html#combine

1.Fis :

FIS is a tool framework designed to address issues such as automation tools, performance optimization, modular frameworks, development specifications, code deployment, and development processes in front-end development.

Tool Framework: FIS provides a very concise and elegant API, through the expansion can create enterprise-class solutions, Fis officially provide solutions: Fis-plus,jello,yogurt, etc.;

Official website: http://fex.baidu.com/

Solution Website: http://oak.baidu.com/

FIS Advantages:

FIS is a series of engineering programs to improve product quality and development efficiency;

Let front-end team can quickly enter the role, do not worry about the underlying framework, performance optimization and other issues;

Can reduce the cost and risk of manual management of static resources, fully automated optimization of page performance;

Streamline development, measurement, and deployment processes for faster, more reliable, and lower-cost automated project delivery;

Three commands to solve the front-end development requirements;

2. Tool Installation:

FIS uses node. js to develop and publish modules on NPM, so using FIS requires that you install node. js and then install the FIS through the NPM installation command;

NPM install-g FIS

To see if the installation was successful: Fis–v

Problems encountered

FIS is hosted on NPM as a Nodejs module, NPM is a NODEJS package management tool, and users need to install FIS using the NPM Install command. More NPM use, execute npm-h to view; Because NPM is often wall-mounted, it can be too slow or not installed. The warehouse can be specified via NPM's--registry parameter. Specify a domestic NPM image to resolve the issue with NPM being wall.

For example:

NPM install some-npm-module-g--registry= domestic Mirror--disturl=https://npm.taobao.org/dist

NPM Install some-npm-module-g--registry=http://registry.npm.taobao.org/--disturl=https://npm.taobao.org/dist

• A domestic image is provided below. Other mirrors you can find it for yourself.
• --registry=http://registry.npm.taobao.org/

That is, you can use the following command to install FIS using the CNPMJS Warehouse

NPM Install fis-g--registry=http://registry.npm.taobao.org/--disturl=https://npm.taobao.org/dist

3. to give a simple example: Make FIS run

The relevant documents are as follows:

 

Map.json: Static Resource table for static resource output

FIS Release: FIS release

Start server:Fis Server start–p port number (command to modify port number)

Fis basic functionality in the build process

4. compression and merging of static resources

Via the FIS official online Demo:

Install Demo:

First install the FIS Package management tool Lights:

NPN install–g Lights

Lights Install Fis-quickstart-demo

I installed it in the E:\fis3\fis2\project\fis-quickstart-demo directory, or I can download it directly from GitHub

Preview page Effects:

How to compress static resources in a page:

The CSS and JS files in the viewing page are compressed (or they can be configured to not compress certain resources)

Consolidation of static resources:

FIS can use the pack to merge resource files, for example, we need to package the common library files in the demo, can modify the Fis-conf.js configuration, Add Pack configuration

Merge into Lib.js, support wildcards regular in the form of a wildcard expression

The consolidation of static resources is used by the-p parameter;

Publish to a different folder, the-d parameter configuration:

Fis RELEASE–PD./output

Lib.js is the combination of the output JS

CSS Merge: (modify config file, rebuild)

The second step of static resource merging, how to request the hash resource directly to the merged resource when rendering the page

After the pack is set, FIS will only package files by default and will not replace static resource references in the page, we can load the packaging module by introducing back-end static resource management. However, you can also use the Fis-postpackager-simple plugin to automatically replace a separate resource reference in a page with a packaged resource.

To install the plugin:

NPM install-g Fis-postpackager-simple

Enable plugins:

Command: compression: FIS Release-o

Consolidation: FIS Release-op

5.fis add MD5 for all static resources Version number

FIS will automatically add the MD5 version number to all static resources during the build process, and will automatically update the path of the resource application to solve the problem of cache update, in order to maximize the utilization of the cache in an optimal scheme;

Add the MD5 version number to the static resource in the project by turning on the-MD5 parameter:

FIS Release--optimize--md5

Command: FIS release–m

The background in CSS also adds the MD5 version number:

MD5 Static resource version:

MD5------- hash based on the content of the file version Redundancy mechanism

User code does not need to make any changes, and is automatically replaced with the version number of the file after compilation

with MD5 benefits of stamping as a static resource:

1. Static resources on the line is not the same name file overwrite, but the filename plus hash redundancy, so you can go online static resources, then online HTML page, there is no gap interval (The old version of the static files remain on the server, the new version of the static resource files back online);

2. When the problem rollback version, no need to roll back the static resources, just roll back the page ;

3. because the static resource version number is the hash of the contents of the file, all static resources can turn on the persistent strong cache, only the static resource files with the updated content will be cached and the cache utilization is greatly increased ;

4. After modifying a static resource, a new file is generated online and a file corresponds to a version, so it will not be attacked by the construction CDN cache form;

Time Stamp configuration:

https://github.com/fex-team/fis/issues/73

6.fis image css Sprite and base64 code embedding

CSS Sprite :

Through the FIS-P parameter control (if you do not want the previous command to affect the current content, you can restart the service----FIS Server start)

To turn on the image merge feature:

Add a. __sprite flag in the CSS (in FIS, if you add a. __sprite when a picture is referenced in the style file, merging the style files with the pack settings will not only merge the style files, but also merge all the pictures that are identified as merged. )

Working with Documents:

Https://github.com/fex-team/fis-spriter-csssprites

Image embedding (base64 encoding): Optimization method

FIS in the construction process can directly compile the image into the corresponding 64-bit base code, embedded in the page, this can be in the process of page requests to save a request, reduce the interaction with the server, thereby improving performance;

Add an inline suffix to the back of the picture:

7. use less in FIS (Advanced use---- more plugins--- language extension class plug-in)

Less is a CSS compiler, meaning that it can extend the CSS language, adding features such as allow variables, mixes, functions and many other techniques, to make your CSS more maintainable, thematic, extensibility; (fewer can run in node environment, browser environment and rhino environment)

To create a new less file, introduce the page:

FIS during the build process, call the less plugin to compile the less file into the source CSS code

The box.less is compiled into the source CSS code:

If the less file is referenced as a CSS file when the page is referenced: Modify the configuration

Roadmap the corresponding situation of the pre-compilation and all paths after compilation, the file with the end of less is modified to the end of the CSS file;

Language-type plugins:

Address: Https://www.npmjs.com/search?q=fis+parser

Installation and use of FIS2