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状态可以采取),

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 黑客帝国 设计师:白松林 返回首页