【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代码压缩