你的位置:首页 > 软件开发 > Java > [原创]结合公司网站首页,谈前端模块化开发与网站性能优化实践

[原创]结合公司网站首页,谈前端模块化开发与网站性能优化实践

发布时间:2015-10-14 16:00:05
说在前面 上午给大家分享的个人认为比较全,比较官方,比较清晰的grunt使用教程,被挪出首页了,不过没关系,毕竟不是原创,大家想看,我现在贴出地址: http://www.cnblogs.com/sybboy/p/4877055.html ...

说在前面

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

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

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

 

目录

 

1.遇到的问题

2.目标

3.如何解决

4.结果分析

5.尚未解决

6.说在后面

 

遇到的问题

   

  问题1----脚本混乱,没有层次和固定代码位置

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

  问题3----代码目录混乱,引用不清晰

  问题4----脚本和css没有添加版本号管理

  

   

目标 

   1.整理页面的代码,必要的代码模块化

   2.文件合并压缩,外部引用的脚本要加密混淆

   3. 网站目录下,所有脚本 样式 图片统一存放

   4. 添加版本号

 

如何解决

  

     问题1----脚本混乱,没有层次和固定代码位置

     

      使用seajs 将代码模块化,用define关键字定义模块,用require调用外部脚本类库及插件,模块内部使用json形式将文件中的代码按业务以及功能分类梳理

     

 

      使用说明:

       1.页面首先引用seajs库

       2.按照固定格式 ,封装代码模块

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

     [原创]结合公司网站首页,谈前端模块化开发与网站性能优化实践

说在后面

     上面的文字虽然不多,但是整个过程弄下来对一个新人来说,是很不容易的,任何一步都会遇到好多问题,反复琢磨,好东西,大家享,希望可以对那些做前端优化的新手,提供点帮助,少走些我走过的弯路吧。。。

      也希望管理员宽容一下,没别的,文章存活时间越长,帮助的人越多,只是想帮助更多的人...大家都是做it技术的,都不容易...

 

 

 

 

 

 

 

   


原标题:[原创]结合公司网站首页,谈前端模块化开发与网站性能优化实践

关键词:前端

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。