常见的SPA首屏优化方式

核心是加载和解析的性能优化

• 加载优化的核心是资源体积和首屏资源数量。
• 解析优化的核心是资源体积和代码的执行性能。

加载优化

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

  Code Splitting = webpack bundle analyzer + CommonsChunkPlugin + 分析

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