1. 通过webpack 的code splitting合理分包；

new webpack.optimize.CommonsChunkPlugin({

  name: 'vendor',

  minChunks: ({ resource }) => (

    resource &&

    resource.indexOf('node_modules') >= 0 &&

    resource.match(/\.js$/)

  ),

}),

1. 启用CDN加速；
2. 静态资源分域名，将图片、音视频等静态资源放到不同的域名加载，避免加载时收到浏览器并发数量限制（http/1.0）；
3. 合理采用DNS预解析，因为DNS解析寻址比较耗时；
4. 尽量启用http/2，需要nginx支持，http/2特点是使用多路复用，对同一个域的服务器只建立一次TCP连接，加载多个资源，使用二进制帧传输，同时会对http头部进行压缩；

解析优化

1. 资源体积的优化，比如压缩字体、图片、音视频等静态资源体积；
2. 最大化利用webpack的Scope Hositing以及Tree Shaking技术，按需加载，尽量使用ES Module方式去组织代码，选择第三方代码的入口点（resolve.mainFields）;

// Scope Hositing https://www.cnblogs.com/tugenhua0707/p/9735894.html

module.exports = {

  resolve: {

    // 针对 Npm 中的第三方模块优先采用 jsnext:main 中指向的 ES6 模块化语法的文件

    mainFields: ['jsnext:main', 'browser', 'main']

  },

  plugins: [

    // 开启 Scope Hoisting 功能

    new webpack.optimize.ModuleConcatenationPlugin()

  ]

};

1. 利用异步方式延迟加载（按需加载）非首屏资源；
2. 利用webpack的CommonsChunkPlugin分包，提取公共代码；

运行性能优化

1. Code Review