vue白屏时间长多种处理方案

其实通过开发者调试工具，我从network中我已经可以看到请求vendor.js和app.js资源的时间太长了，导致整体请求时间过长。其实学过vue的都知道，htm中只有一个root 的容器，是一个单页应用，需要将所有需要的资源都下载到浏览器端并解析。

1. 提取第三方库，三方依赖文件以及打包文件放进CDN服务器

将vue，vue-router，vuex，axios，element-ui等依赖文件不进行引入，整体的vendor和app文件大小大大减少，写法和配置文件如下：

main.js(不需要进行引入依赖）

webapack.base.conf.js

2. 对路由进行懒加载

3. 首页白屏添加骨架屏或loading（仅仅是优化体验）

参考文章可以看here

4. 优化 webpack 减少模块打包体积，code-split 按需加载

由于webpack打包后的js过大，以至于在加载资源时间过长。所以将文件打包成多个js文件，在需要的时候按需加载。

entry:{ 
 main:'xxx.js'
} 
plugins:{
 new commonsChunkPlugin({
 name:'commons',
 minChunks:function(module){
  // 下边return参考的vue-cli配置
  // any required modules inside node_modules are extracted to vendor
  return (
   module.resource &&
   /\.js$/.test(module.resource) &&
   module.resource.indexOf(
   path.join(__dirname, '../node_modules')
   ) === 0
  )
 }
}) ,
// 以下才是关键
new commonsChunkPlugin({
 name:'charts',
 chunks:['commons'] 
 minChunks:function(module){
  return (
   module.resource &&
   /\.js$/.test(module.resource) &&
   module.resource.indexOf(
   path.join(__dirname, '../node_modules')
   ) === 0 && ['jquery.js', 'highcharts.js','echarts'].indexOf( module.resource.substr(module.resource.lastIndexOf('/')+1).toLowerCase() ) != -1
  )
 }
}) 
}

5. 服务端渲染，在服务端事先拼装好首页所需的 html

6. 服务端开启gzip压缩

7. element-ui等UI框架按需引入

8. 打包文件分包，提取公共文件包

9. 使用文件名增加hash名，解决新版本需要清除依赖的问题

10. 代码压缩

webpack 自带了一个压缩插件 UglifyJsPlugin，只需要在配置文件中引入即可。

{
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
}

加入了这个插件之后，编译的速度会明显变慢，所以一般只在生产环境启用。

备注：出现页面后，图片加载太慢，图片逐渐加载，体验效果不佳

压缩图片文件，减少文件体积

图片资源放进CDN服务器

使用CSS精灵图

另外按照图片的重要性，首屏出现的照片进行提前加载，初始首屏之外的图片进行按需加载，或者说是懒加载，对某些图片可以进行预加载（这种方案需要待商榷，因为可能会损害用户的流量的浪费，最好的办法就是判断当前的网络状态，如果是WIFi状态可以采取），