【PC网站前端架构探讨系列】结合公司网站首页，谈前端模块化开发与网站性能优化实践

说在前面

上午给大家分享的个人认为比较全，比较官方，比较清晰的grunt使用教程，被挪出首页了，不过没关系，毕竟不是原创，大家想看，我现在贴出地址：

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

下面可是我自己的东西，算是这段时间搞前端架构的总结吧:

    define([“jquery”,‘../index-plugin.min’],function(require){

                                                                   //方括号中的为依赖项

                   var $=require(‘jquery’);            //require 调用依赖项

                    require(‘../index-plugin.min’)($);    //插件调用方式

                    var MOD = { 方法A:function(参数){}，方法B…..};

                    return MOD;

    });

3.页面配置seajs以及引用模块代码

现全站配置统一放于config.js

具体配置说明：http://liuxiaofan.com/2013/12/11/1547.html

引用:

seajs.use([‘jquery’,‘business/index.min’],function($,I){ //1.这里是方法内容 2.方括号中的为引用的类库以及模块文件 3. 参数中分别对应相应的引用 } )

问题2----脚本和css请求较多，请求未压缩，文件未压缩合并

页面的脚本和样式处理统一使用的grunt来处理，使用很简单：

安装过程内容比较多，具体看下我的技术博客：

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

注意使用grunt，个人感觉配置很重要，命令就一个grunt,这是我用到的配置：

   module.exports = function(grunt) {

     // 配置

      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']    // 合并并压缩 path/to 目录下(包含子目录)的所有css文件

   // }

      // }

     // combine: {

   // files: {

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

   // }

     // },

     // minify: {

   // expand: true,        // 启用下面的选项

   // cwd: 'src/css/',    // 指定待压缩的文件路径

   // src: ['*.css', '!*.min.css'],    // 匹配相对于cwd目录下的所有css文件(排除.min.css文件)

   // dest: 'dest/css/',    // 生成的压缩文件存放的路径

   // ext: '.min.css'        // 生成的文件都使用.min.css替换原有扩展名，生成文件存放于dest指定的目录中

     // }

   //}

   // uncss: {

     // dist: {

   // // options: {

     // // ignore: ['#added_at_runtime', '.created_by_jQuery']

   // // },

   // files: {

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

   // }

     // }

     // },

     imagemin: {

             /* 压缩图片大小 */

             dist: {

                 options: {

                     optimizationLevel: 3 //定义 PNG 图片优化水平

                 },

                 files: [

                         {

   expand: true,

   cwd: 'src/img/activity',

   src: ['**/*.{png,jpg,gif}'], // 优化 img 目录下所有 png/jpg/jpeg 图片

   dest: 'dest/img/activity' // 优化后的图片保存位置，覆盖旧图片，并且不作提示

                        }

                     ]

                 }

             }

     });

     // 载入concat和uglify插件，分别对于合并和压缩

     //grunt.loadNpmTasks('grunt-contrib-concat');

     //grunt.loadNpmTasks('grunt-contrib-uglify');

   //grunt.loadNpmTasks('grunt-contrib-cssmin');

   //grunt.loadNpmTasks('grunt-uncss');

   grunt.loadNpmTasks('grunt-contrib-imagemin');

     // 注册任务

     grunt.registerTask('default', ['imagemin']);

 };

结果分析

之前：

首页样式与脚本的请求

结合yslow，可以看出首页总共有74个请求，总共1882kb，其中脚本11个请求，180kb左右，加载脚本需要2.68s；样式8个请求，占324kb,加载样式所需35ms,大部分请求在图片

之后：

首页样式与脚本的请求

结合yslow，可以看出优化后的首页总共有63个请求，总共1631kb，其中脚本9个请求，150kb左右，加载脚本需要2.2s；样式2个请求，占200kb,加载样式所需8ms,大部分请求在图片

结论：页面请求减少11个，请求总量减少250多kb，请求时间减少0.5s左右

尚未解决

很明显通过上次优化，请求量以及时间还是个问题，效果不太明显，下面是使用page speed分析的结果：

　　问题一：

　　网站的请求没有进行gzip压缩，预计压缩后请求尺寸至少小一半

问题二：

　　图片过大，可以适当压缩

　　问题三：

　　页面的HTML代码压缩