前端性能优化

1，尽可能的缩小webpack或者其他打包工具生成的包的大小

• 去除不必要的插件
• 去除devtool选项
• 分离CSS 安装插件：npm install extract-text-webpack-plugin --save
• 使用webpack.optimize.UglifyJsPlugin插件压缩混淆
• 提取第三方库 像 react 这个库的核心代码就有 627 KB，这样和我们的源代码放在一起打包，体积肯定会很大。所以可以在 webpack 中设置

{
  entry: {
   bundle: 'app'
    vendor: ['react']
  }
  plugins: {
    new webpack.optimize.CommonsChunkPlugin('vendor',  'vendor.js')
  }
}

• webpack 插件列表。例如，当多个 bundle 共享一些相同的依赖，CommonsChunkPlugin 有助于提取这些依赖到共享的 bundle 中，来避免重复打包。可以像这样添加
• 按需打包

2，防抖（debounce）/节流

• 防抖：高频率事件在n秒内触发一次，如果再次触发，则重新计时

/*
 * @fn：要防抖执行的函数
 * @wait：防抖等待的时间
 * @immediate: true 表立即执行，false 表非立即执行
 */
debounce(fn, interval) {
    let timeout;
    return function() {
          let ctx = this;
          let args = arguments;

          if (timeout) clearTimeout(timeout);

         timeout = setTimeout(() => {
            fn.apply(ctx, args);
      }, interval);
}}

• 节流：高频率事件在n秒内触发一次，n秒内不再触发

/*
 * @fn：要防抖执行的函数
 * @wait：防抖等待的时间
 * @immediate: true 表立即执行，false 表非立即执行
 */
 
throttle(fn, interval) {
      let last = 0;
      return function() {
         let ctx = this;
         let args = arguments;

         let now = +new Date();
         if (now - last > interval) {
             last = now;
             fn.apply(ctx, args);
         }
}}

区别：防抖动和节流本质不一样；防抖是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。

3、图片懒加载（当图片出现在页面中，把data-src赋值给src）

<img src="http://s4.sinaimg.cn/mw69" alt="1" data-src="http://img4.imgtn.bdimg.com/it/gp=0.jpg">

当载入页面时，先把可视区域内的img标签的data-src属性值负给src，然后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载

4，提取组件的 CSS 到单独到文件

当使用单文件组件时，组件内的 CSS 会以 <style> 标签的方式通过 JavaScript 动态注入。这有一些小小的运行时开销，将所有组件的 CSS 提取到同一个文件可以避免这个问题，也会让 CSS 更好地进行压缩和缓存

5，GZip压缩

在服务器端对文件进行压缩，在浏览器端对文件解压缩，可有效减少通信传输的数据量
项目开启Gzip

• npm install compression
• 配置 server.js 新加如下命令

var compression = require('compression')
var app = express();
//尽量在其他中间件前使用compression
app.use(compression());

6，使用浏览器缓存

cache-control：用于控制HTTP缓存；
Expires：指定的时间内，同样的请求都可以使用缓存。
max-age ：判断 max-age 时间，时间内请求直接从浏览器缓存中获取，时间外直接请求，可以消除Expires的限制

7，图片优化（建议使用png）

• jpg 有损压缩 压缩率高 不支持透明
• png 支持透明 浏览器兼容性好
• webp 压缩程度更好 在iOS webview有兼容性问题
• SVG 矢量图 图片样式相对简单的场景

大小比较：

通常地，PNG ≈ JPG > GIF
透明性：PNG > GIF > JPG
色彩丰富程度：JPG > PNG >GIF
兼容程度：GIF ≈ JPG > PNG

8，使用服务端渲染的方式

9、按照页面或者组件分块懒加载

10，本地储存的使用

• Cookie可以用来存储用户爱好和购买记录，用户浏览过的网站，曾经点击过的广告等信息；
• Session Storage 更适合用来存储生命周期和它同步的会话级别的信息。这些信息只适用于当前会话，当你开启新的会话时，它也需要相应的更新或释放，比如微博的 Session Storage 就主要是存储你本次会话的浏览足迹；
• Local Storage 的特点之一是持久，有时我们更倾向于用它来存储一些内容稳定的资源。比如图片内容丰富的电商网站会用它来存储 Base64 格式的图片字符串；
• IndexDB 是一个运行在浏览器上的非关系型数据库，IndexDB 可以看做是 LocalStorage 的一个升级，当数据的复杂度和规模上升到了 LocalStorage 无法解决的程度，我们毫无疑问可以请出 IndexDB 来帮忙。