标签：
上午给大家分享的个人认为比较全，比较官方，比较清晰的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. 添加版本号
使用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. 参数中分别对应相应的引用 } )
页面的脚本和样式处理统一使用的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技术的，都不容易...
【原创】结合公司网站首页，谈前端模块化开发与网站性能优化实践
标签：
原文地址：http://www.cnblogs.com/sybboy/p/4877696.html
