网站性能优化实战

优化结果：

• 结果首屏时间从20多秒缩减为1s

nginx配置js压缩

gzip on
gzip types application/javascript ...

配置etag 和expire

图片资源优化

1. 压缩图片，tinypng

2. 图片懒加载, 加载条件为：元素的scrollTop - clientHeight > window.scrollTop

JS优化

1. 使用延迟脚本或者异步脚本

2. 入口文件或者首页依赖的包，不要放进vendor

• 虽然分离公共的库进vendor可以加快打包速度，但是增加了vendor的体积，

• 非入口文件依赖的vendor使用async，入口文件和首页文件，使用defer，可以使用文件js按顺序执行，并且不阻塞页面渲染。

  new HtmlWebpackPlugin({
      template: paths.client('index.html'),
      chunksSortMode: 'dependency',
      hash: false,
      // favicon: paths.client('static/favicon.ico'),
      filename: 'index.html',
      inject: 'body',
      minify: {
        collapseWhitespace: true
      }
    }),

• 插入延迟或者异步脚本，需借助html-webpack-plugin的插件

  new ScriptExtHtmlWebpackPlugin({
      defer: ['vendor1', 'app'],
      defaultAttribute: 'async'
    })