可以用到项目的优化网站加载速度方案

1、合并图标，减少网络请求

合并图标是减少网络请求的常见的优化手段，网页中的小图标特征是体积小、数量多，而浏览器同时发起的并行请求数量又是有限制的，所以这些小图标会严重的影响网页的加载速度，阻碍关键内容的请求和呈现

sprite图

合并sprite图是慢工细活儿，并没有特别大的技术含量，但却是每个前端开发都必须掌握的技术。gulp.spritesmith插件。

// 构建视图文件
gulp.task('sprites', function() {
    var spriteData = gulp.src(config.src)
        .pipe(plumber(handleErrors))
        .pipe(newer(config.imgDest))
        .pipe(logger({ showChange: true }))
        .pipe(spritesmith({
            cssName: 'sprites.css',
            imgName: 'sprites.png',
            cssTemplate: path.resolve('./gulp/lib/template.css.handlebars')
        }));
        var imgStream = spriteData.img
        .pipe(buffer())
        .pipe(gulp.dest(config.imgDest));    
        var cssStream = spriteData.css
        .pipe(gulp.dest(config.cssDest));    
        return merge([imgStream, cssStream]);
});

sprite图不适合移动端的响应式场景。

iconfont字体文件

iconfont字体文件是用字体编码的形式来实现图标效果，既然是文字，那就可以随意设置颜色设置大小，相对来说比sprite方案更好。但是它只适用于纯色图标。推荐使用 阿里巴巴矢量图标库

2、用base64代替图片

场景：适用于图片大小小于2KB，页面上引用图片总数不多的情况 原理：将图片转换为base64编码字符串inline到页面或css中 优势：减少http的请求次数，并可以放到后台数据库中，只传输字符串，有较多的构建工具可以直接实现 劣势：这种方法仅限于图片总数较少，而且图片大小小于2KB的情况。否则图片字符串会变得很长很长

3、图片处理

1.图片懒加载

图片是网页中流量占比最多的部分，也是需要重点优化的部分。

2.图片压缩

好用的网站：

https://tinypng.com/

https://zhitu.isux.us/

http://alloyteam.github.io/gopng/

4、JS/CSS按需打包

按需打包是webpack独特的优势，如果有需要通过此种方式来管理模块之间的依赖关系，强烈推荐引入！

插件化：webpack本身非常灵活，提供了丰富的插件接口。基于这些接口，webpack开发了很多插件作为内置功能。速度快：webpack使用异步IO以及多级缓存机制。所以webpack的速度是很快的，尤其是增量更新。丰富的Loaders：loaders用来对文件做预处理。这样webpack就可以打包任何静态文件。高适配性：webpack同时支持AMD/CommonJs/ES6模块方案。webpack会静态解析你的代码，自动帮你管理他们的依赖关系。此外，webpack对第三方库的兼容性很好。代码拆分：webpack可以将你的代码分片，从而实现按需打包。这种机制可以保证页面只加载需要的JS代码，减少首次请求的时间。优化：webpack提供了很多优化机制来减少打包输出的文件大小，不仅如此，它还提供了hash机制，来解决浏览器缓存问题。开发模式友好：webpack为开发模式也提供了很多辅助功能。比如SourceMap、热更新等。使用场景多：webpack不仅适用于web应用场景，也适用于Webworkers、Node.js场景

webpack 如何最佳配置？

webpack官方提供的配置方法是通过module.exports返回一个json，但是这种场景不灵活，不能适配多种场景。webpack.config.production.js/webpack.config.development.js，然后不同场景下，使用不同的配置文件。

相对来说，第一种更简单，但是重复配置多；第二种更灵活，推荐第二种方式。

module.exports =  function (env) {

     return  {

         context: config.context,

         entry: config.src,

         output: {

             path: path.join(config.jsDest, project),

             filename:  '[name].js' ,

             chunkFilename:  '[name].[chunkhash:8].js' ,

             publicPath:  '/assets/'  + project +  '/'

         },

         devtool:  "eval" ,

         watch:  false ,

         profile:  true ,

         cache:  true ,

         module: {

             loaders: getLoaders(env)

         },

         resolve: {

             alias: getAlias(env)

         },

         plugins: getPlugins(env)

     };

}

其中关键的配置这儿简单介绍如下，后续的系列博客会根据每个点详细介绍。context：上下文。entry：入口文件，是所有依赖关系的入口，webpack从这个入口开始静态解析，分析模块之间的依赖关系。output：打包输出的配置。devtools：SourceMap选项，便于开发模式下调试。watch：监听模式，增量更新，开发必备！profile：优化。cache：webpack构建的过程中会生成很多临时的文件，打开cache可以让这些临时的文件缓存起来，从而更快的构建。module.loaders：如前文介绍，loaders用来对文件做预处理。这样webpack就可以打包任何静态文件。resolve.alias：模块别名，这样可以更方便的引用模块。plugins：如前文介绍，webpack的一些内置功能均是以插件的形式提供。

webpack和gulp区别：

gulp是基于流的构建工具：all in one的打包模式，输出一个js文件和一个css文件，优点是减少http请求，万金油方案。

如何减小请求大小？

1、JS/CSS/HTML压缩

这也是常规手段，就不介绍太多，主要的方式有：

简单介绍一下JS/CSS/HTML压缩方式和一些注意事项

JS压缩

JS压缩：使用webpack的UglifyJsPlugin插件，同时做一些代码检测。

new  webpack.optimize.UglifyJsPlugin({

     mangle: {

         except: [ '$super' ,  '$' ,  'exports' ,  'require' ]

     }

})

CSS压缩

CSS压缩：使用cssnano压缩，同时使用postcss做一些自动化操作，比如自动加前缀、属性fallback支持、语法检测等。

var  postcss = [

     cssnano({

         autoprefixer:  false ,

         reduceIdents:  false ,

         zindex:  false ,

         discardUnused:  false ,

         mergeIdents:  false

     }),

     autoprefixer({

         browers: [ 'last 2 versions' ,  'ie >= 9' ,  '> 5% in CN' ]

     }),

     will_change,

     color_rgba_fallback,

     opacity,

     pseudoelements,

     sorting

];

HTML压缩

HTML压缩：使用htmlmin压缩HTML，同时对不规范的HTML写法纠正。

// 构建视图文件-build版本

gulp.task( 'build:views' , [ 'clean:views' ],  function () {

     return  streamqueue({ objectMode:  true  },

             gulp.src(config.commonSrc, { base:  'src'  }),

             gulp.src(config.layoutsSrc, { base:  'src'  }),

             gulp.src(config.pagesSrc, { base:  'src/pages'  }),

             gulp.src(config.componentsSrc, { base:  'src'  })

         )

         .pipe(plumber(handleErrors))

         .pipe(logger({ showChange:  true  }))

         .pipe(preprocess({ context: { PROJECT: project } }))

         .pipe(gulpif( function (file) {

             if  (file.path.indexOf( '.html' ) != -1) {

                 return  true ;

             }  else  {

                 return  false ;

             }

         }, htmlmin({

             removeComments:  true ,

             collapseWhitespace:  true ,

             minifyJS:  true ,

             minifyCSS:  true ,

             ignoreCustomFragments: [/<%[\s\S]*?%>/, 

                                     /<\?[\s\S]*?\?>/, 

                                     /<meta[\s\S]*?name= "viewport" [\s\S]*?>/]

         })))

         .pipe(gulp.dest(config.dest));

});

2、gzip压缩

gzip压缩也是比较常规的优化手段。前端并不需要做什么实际的工作，后台配置下服务器就行，效果非常明显。如果你发现你的网站还没有配置gzip，那么赶紧行动起来吧。

gzip压缩效果

那么gzip压缩的效果有多明显呢？保守估计，在已经完成JS/CSS/HTML压缩的基础上，还能降低60-80%左右的大小。

但需要注意，gzip压缩会消耗服务器的性能，不能过度压缩。所以推荐只对JS/CSS/HTML等资源做gzip压缩。图片的话，托管到第三方的图片建议开启gzip压缩，托管到自己应用服务器的图片不建议开启gzip压缩。

3、JS/CSS按需加载

和前面提到的按需打包不同。JS/CSS按需打包是预编译发生的事情，保证只打包当前页面相关的逻辑。JS/CSS按需加载是运行时发生的事情，保证只加载当前页面第一时间使用到的逻辑。

那么怎么实现按需加载呢？好奇心日报使用webpack提供的require及require.ensure方法来实现按需加载，值得一提的是，除了指定的按需加载文件列表，webpack还会自动解析回调函数的依赖及指定列表的深层次依赖，并最终打包成一个文件。

webpack按需加载

上诉代码的实现效果是：只有当点击登录按钮的时候，才会去加载登录相关的JS/CSS资源。资源在加载成功后自动执行。

4、图片压缩，jpg优化

托管到应用服务器的图片压缩

可以手动处理，也可以通过gulp子任务来处理。tinypng ，压缩效果极好。gulp-imagemin插件，自动化处理，效果也还不错。

// 图片压缩
gulp.task('images', function() {
    return gulp.src(config.src)
            .pipe(plumber(handleErrors))
            .pipe(newer(config.dest))
            .pipe(logger({ showChange: true }))
            .pipe(imagemin()) // 压缩
        .pipe(gulp.dest(config.dest));
});

托管到第三方平台的图片压缩

比如七牛云平台，他们会有一套专门的方案来对图片压缩，格式转换，裁剪等。只需要在url后面加上对应的参数即可，虽然偶尔会有一些小bug，但整体来说，托管方案比用自家应用服务器方案更优。

改变参数，实现不同程度的压缩

jpg优化

除了对图片进行压缩之外，对透明图床没有要求的场景，强烈建议将png转换为jpg，效果很明显！

png转jpg，体积相差八倍

5、webp优化 & srcset优化

webp优化

粗略看一眼，卧槽，兼容性这么差，也就安卓浏览器及chrome浏览器对它的支持还算给力。

webp兼容性

另一方面，webp优化能在jpg的基础上再降低近50%的大小。其优化效果明显。此外，如果浏览器支持webpanimation，还能对gif做压缩！

普通图片webp优化

gif图片优化

兼容性差，但效果好！最终好奇心决定尝试一下。

鉴于浏览器对webp的支持比较局限，我们采用渐进升级的方式来优化：对于不支持webp的浏览器，不做处理；对于支持webp的浏览器，将图片src替换成webp格式。

// 检测浏览器是否支持webp

// 之所以没写成回调，是因为即使isSupportWebp=false也无大碍，但却可以让代码更容易维护

( function () {

     function  webpTest(src, name) {

         var  img =  new  Image(),

             isSupport =  false ,

             className, cls;

 

         img.onload =  function () {

             isSupport = !!(img.height > 0 && img.width > 0);

 

             cls = isSupport ? ( ' '  + name) : ( ' no-'  + name);

             className = document.querySelector( 'html' ).className

             className += cls;

 

             document.querySelector( 'html' ).className = className.trim();

         };

         img.onerror =  function () {

             cls = ( ' no-'  + name);

             className = document.querySelector( 'html' ).className

             className += cls;

 

             document.querySelector( 'html' ).className = className.trim();

         };

 

         img.src = src;

     }

 

     var  webpSrc =  'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoB\

                 AAEAAwA0JaQAA3AA/vuUAAA=' ,

         webpanimationSrc =  'data:image/webp;base64,UklGRlIAAABXRUJQVlA4WAoAAAA\

                             SAAAAAAAAAAAAQU5JTQYAAAD/AABBTk1GJgAAAAAAAAAAAA\

                             AAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA' ;

 

     webpTest(webpSrc,  'webp' );

     webpTest(webpanimationSrc,  'webpanimation' );

})();

借鉴modernizr，实现了检测webp/webpanimation兼容性的函数，从代码中可以看出，检测原理就是模拟下载对应格式的图片，在异步函数中可以得到兼容性结果。

接下来就是替换url为webp格式

// 获取webp格式的src

function  _getWebpSrc(src) {

     var  dpr = Math.round(window.devicePixelRatio || 1),

         ratio = [1, 1, 1.5, 2, 2, 2],

         elHtml = document.querySelector( 'html' ),

         isSupportWebp = (/(^|\s)webp(\s|$)/i).test(elHtml.className),

         isSupportWebpAnimation = (/(^|\s)webpanimation(\s|$)/i).test(elHtml.className),

         deviceWidth = elHtml.clientWidth,

         isQiniuSrc = /img\.qdaily\.com\ //.test(src),

         format = _getFormat(src),

         isGifWebp, isNotGifWebp, regDetailImg;

 

     if  (!src || !isQiniuSrc || !format || format ==  'webp' ) {

         return  src;

     }

 

     isNotGifWebp = (format !=  'gif'  && isSupportWebp);

     isGifWebp = (format ==  'gif'  && isSupportWebpAnimation);

 

     // 根据屏幕分辨率计算大小

     src = src.replace(/\/(thumbnail|crop)\/.*?(\d+)x(\d+)[^\/]*\ //ig, function(match, p0, p1, p2) {

         if (dpr > 1){

             p1 = Math.round(p1 * ratio[dpr]);

             p2 = Math.round(p2 * ratio[dpr]);

 

             match = match.replace(/\d+x\d+/, p1 +  'x'  + p2)

         }

 

         return  match;

     });

 

     if (isNotGifWebp || isGifWebp) {

        // 替换webp格式，首页/列表页

         src = src.replace(/\/format\/([^\/]*)/ig,  function (match, p1) {

             return  '/format/webp' ;

         });

     }

}

注意事项

1、window的屏幕像素密度不一定是整数，mac浏览器缩放之后，屏幕像素密度也不是整数。所以获取dpr一定要取整：dpr = Math.round(window.devicePixelRatio || 1);。ratio = [1, 1, 1.5, 2, 2, 2]表示：1倍屏使用1倍图，2倍屏使用1.5倍图，3倍屏以上都用2倍图。这儿的规则可以按实际情况来设置。

devicePixelRatio兼容性

srcset兼容性

srcset兼容性

如上所述，在对webp优化的时候，我们顺道模拟实现了srcset：根据屏幕像素密度来设置最适合的图片宽高。

知识点

整体来说，涉及的知识面比较广：包括webpack & gulp的构建系统、图片的webp优化、服务器的gzip配置、浏览器的加载顺序、图片延迟加载方案等等。

推荐公众号：前端达人 专注分享当下最实用的的前端技术！
长按二维码点选（识别图中二维码）