首屏加载

2019-10-17 本文已影响0人撑船的摆渡人

关于首屏加载相信很多人在项目中会遇到。

为什么要做首屏优化？

首屏时间的快慢直接影响到用户对网站的认知度。加载的越快可能用户停留的时间越长，用户转化率越高。
最能反映页面性能的一个指标是FPS（每秒传输帧数(Frames Per Second)）。每秒钟帧数愈多，所显示的动作就会越流畅。一般系统设定屏幕的刷新率为60fps，一帧的时长约16ms，除去系统上下文切换开销，每一帧只留10ms左右的程序处理时间。

怎么做？

首先要明白的一点是，关键模块优先加载，要保证不论什么情况下都不能失去重点。然后首屏的内容强制渲染，其他的进入懒加载队列。懒加载一般在浏览器空闲时间处理，保证不阻塞；担心未触发onload事件，5s之后执行懒加载队列

当页面中触发 mousemove scroll mousedown touchstart touchmove keydown resize onload 这些事件的时候，说明用户开始与页面交互了，程序必须开始加载。
如果用户没有交互，但是页面已经 onload 了，程序当然不能浪费这个绝佳的空档机会，趁机加载内容；经测试，部分情况下，onload 事件没有触发（原因尚不知），所以还设定了一个超时加载，5s 之后，不论页面加载情况如何，都会将剩下的非关键模块加入到懒加载监控。

前端缓存和异步加载

1.懒加载，我们只加载页面上第一眼看到的内容。
2.本地存储
3.loading动画或者一个海报
4.异步加载
5.在使用ui库时,尽量使用按需加载方式.
6.合理规划三方库的引用
7.善用webpack-bundle-analyzer优化项目依赖
8.服务端开启 gzip压缩

webpack-bundle-analyzer webpack打包分析工具

npm install --save-dev webpack-bundle-analyzer

然后在 webpack.prod.conf.js 中配置

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugins: [
new BundleAnalyzerPlugin(
    {
         analyzerMode: 'server',
         analyzerHost: '127.0.0.1',
         analyzerPort: 8888,
         reportFilename: 'report.html',
         defaultSizes: 'parsed',
         openAnalyzer: true,
         generateStatsFile: false,
         statsFilename: 'stats.json',
         statsOptions: null,
         logLevel: 'info'
       }
    ),
]

配置完成，在项目 npm run build 结束后，就会自动打开一个文件的模块组成图在默认浏览器中，图中面积大的就是对应模块占据的空间。
列如，打包后全局注册的elementUI包很大，我们可以改成按需引入的形式，然后看是否有安装babel-plugin-component插件，才能使局部引用有效。

CND，直接外链第三方库

首先在index.html加入需要引入的库
然后在webpack.base.conf.js中加入externals


module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  externals: {
    'jquery': 'jQuery',
    'element-ui':'ELEMENT',
    'vue': 'Vue'
  }

/**** 项目中使用是这样的 ****/
externals: {
    "Vue": "vueFamily.vue",
    "vue-router":'vueFamily.vueRouter',
    'vuex':'vueFamily.vuex',
  },
  plugins:[
    new HtmlWebpackExternalsPlugin({
      externals: [
        {
          module: 'vueFamily',
          entry: '//static.cn/fe-libs/vueFamily.js',
          global: 'vueFamily',
        },
      ],
    })
  ]

GZIP打包，首先安装gzip

npm install -save gzip
在webpack.prod.conf.js加入如下代码

if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')
 
  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

在index.js中加入如下代码

productionGzip: false,
productionGzipExtensions: ['js', 'css'],