"Original" combined with the company website home page, talk about the front-end modularization development and website performance optimization Practice

Say in front

The morning to everyone to share the personal think more, more official, more clear grunt use tutorial, was moved first page, but it doesn't matter, after all, not original, we want to see, I now posted address:

Http://www.cnblogs.com/sybboy/p/4877055.html

Here's my own stuff, a summary of the front-end architecture for this period:

Directory

1. Problems encountered

2. Target

3. How to Resolve

4. Results analysis

5. Not yet resolved

6. Say in the back

Problems encountered

Issue 1----Scripting clutter, no hierarchy and fixed code location

2----scripts and CSS requests are not compressed, the files are not compressed and merged

Issue 3----Code catalog is confusing and references are unclear

Issue 4----script and CSS do not add version number management

Goal

1. Organize the Code of the page, the necessary code modularization

2. File merge compression, externally referenced scripts to encrypt confusion

3. All script-style images are stored uniformly in the site directory

4. Add a version number

How to Solve

Issue 1----Scripting clutter, no hierarchy and fixed code location

Use SEAJS to modularize the code, define the module with the Define keyword, invoke the external script class library and plug-in with the Require, and use the JSON form to sort the code in the file by business and function.

Instructions for use:

1. The page first references the SEAJS library

2. Package code module in fixed format

define (["jquery", ' ... /index-plugin.min '],function (require) {//brackets are dependencies

var $=require (' jquery '); Require calling dependencies

Require ('..    /index-plugin.min ') ($); Plug-in invocation mode

var MOD = {method A:function (parameter) {}, method B ...};

return MOD;

});

3. Page configuration seajs and Reference module code

Now the whole station configuration unified in Config.js

Specific configuration Description: http://liuxiaofan.com/2013/12/11/1547.html

Reference:

Seajs.use ([' jquery ', ' Business/index.min '],function ($,i) {//1. Here is the method content 2. The class library referenced in square brackets and the module file 3. Corresponding references in the parameters respectively} )

2----scripts and CSS requests are not compressed, the files are not compressed and merged

The script and style of the page is handled uniformly using grunt, which is simple to use:

Installation process more content, specific to see my technical blog:

Http://www.cnblogs.com/sybboy/p/4877055.html

Note Using grunt, the personal feeling configuration is very important, the command is a grunt, this is the configuration I used:

Module.exports = function (grunt) {

Configuration

Grunt.initconfig ({

Pkg:grunt.file.readJSON (' Package.json '),

Uglify: {

Options: {

Banner: '/*! <%= pkg.name%> <%= grunt.template.today ("Yyyy-mm-dd")%> */\n '

// },

Build: {

SRC: ' src/js/index.js ',

Dest: ' Dest/js/index.min.js '

// }

// }

Concat: {

DOMOP: {

SRC: [' src/index-plugin.min.js ', ' wow.min.js '],

Dest: ' Dest/index-plugin2.min.js '

// }

// }

Cssmin: {

Add_banner: {

Options: {

Banner: '/* index CSS file by Peng 20151009*/'

// // },

Files: {

' Dest/css/index.min.css ': [' src/css/**/*.css ']//merge and compress all CSS files in the Path/to directory (including subdirectories)

// }

// }

Combine: {

Files: {

' Path/to/output.css ': [' path/to/input_one.css ', ' path/to/input_two.css ']

// }

// },

Minify: {

Expand:true,//enable the following options

CWD: ' src/css/',//Specify the file path to be compressed

SRC: [' *.css ', '!*.min.css '],//Match all CSS files relative to the CWD directory (excluding. min.css files)

Dest: ' dest/css/',//The path of the generated compressed file storage

Ext: '. Min.css '///generated files are used by the. Min.css to replace the original extension, and the makefile is stored in the directory specified by dest

// }

//}

UNCSS: {

Dist: {

Options: {

Ignore: [' #added_at_runtime ', '. Created_by_jquery ']

// // },

Files: {

' Src/css/index_base.css ': [' src/html/index.html ']

// }

// }

// },

Imagemin: {

/* Compress picture size */

Dist: {

Options: {

Optimizationlevel:3//define PNG picture optimization level

},

Files: [

{

Expand:true,

CWD: ' Src/img/activity ',

SRC: [' **/*.{ Png,jpg,gif} '],//optimize all PNG/JPG/JPEG images under the IMG directory

Dest: ' dest/img/activity '//Optimized picture save location, overwrite old picture, and do not prompt

}

]

}

}

});

Load concat and Uglify plugins, respectively, for merging and compressing

Grunt.loadnpmtasks (' Grunt-contrib-concat ');

Grunt.loadnpmtasks (' grunt-contrib-uglify ');

Grunt.loadnpmtasks (' grunt-contrib-cssmin ');

Grunt.loadnpmtasks (' grunt-uncss ');

Grunt.loadnpmtasks (' grunt-contrib-imagemin ');

Registering tasks

Grunt.registertask (' Default ', [' imagemin ']);

};

Results analysis

Before:

Home style vs. scripting requests

Combined with YSlow, you can see the home page total of 74 requests, a total of 1882kb, where the script 11 requests, 180kb or so, load script needs 2.68s; Style 8 requests, Occupy 324KB, load the style required 35ms, most of the requests in the picture

After:

Home style vs. scripting requests

Combined with YSlow, you can see that the optimized home page has a total of 63 requests, a total of 1631kb, where the script 9 requests, 150kb or so, load script needs 2.2s; Style 2 requests, account for 200KB, load the style required 8ms, most of the requests in the picture

Conclusion: The page request is reduced by 11, the total request is reduced by more than 250 KB, and the request time is reduced by about 0.5s

  Not yet resolved

It is clear that the last optimization, the amount of requests and the time is still a problem, the effect is not obvious, the following is the result of using page speed analysis:

Question one:

The request for the site is not gzip compressed and is expected to be at least half the size of the request after compression

Question two:

The picture is too large and can be properly compressed

Question three:

HTML code compression for pages

In the back.

Although the above text is not many, but the whole process to get down to a newcomer, is very difficult, any step will encounter a lot of problems, repeated pondering, good things, we enjoy, I hope that those who do the front-end optimization of the novice, to provide a point of help, less go some of the detours I have walked ...

Also hope that the administrator tolerant, nothing else, the longer the article survived, help more people, just want to help more people ... Everyone is doing it technology, is not easy ...

"Original" combined with the company website home page, talk about the front-end modularization development and website performance optimization Practice