vue怎么解决首次加载白屏问题（Vue首屏加载过慢出现白屏的六种优化方案）

公司业务展示官网开发    
    
    
，构建版本后在测试环境下   


     


     


，发下首屏加载损耗高达几十秒（服务器在国外



 




 




 ，所以也导致加载时间变长）   

   

   
，于是采用了以下方法来达到提速目的  
    
    
。 

1. 采用懒加载的方式

路由懒加载和组件懒加载：const One = ()=>import("./one");

图片懒加载：使用vue-lazyload插件

//引入vue懒加载 import VueLazyload from vue-lazyload //方法一： 没有页面加载中的图片和页面图片加载错误的图片显示 // Vue.use(VueLazyload) //方法二： 显示页面图片加载中的图片和页面图片加载错误的图片 //引入图片 import loading from @/assets/images/load.jpg //注册图片懒加载 Vue.use(VueLazyload, { // preLoad: 1.3, error: @/assets/images/error.jpg,//图片错误的替换图片路径(可以使用变量存储) loading: loading,//正在加载的图片路径(可以使用变量存储) // attempt: 1 })

2.webpack开启gzip压缩文件传输模式

gizp压缩是一种http请求优化方式    

     

     

，通过减少文件体积来提高加载速度

     


     


     。html    
    
    
、js   


     


     


、css文件甚至json数据都可以用它压缩




  




  




 ，可以减小60%以上的体积 




 




 



。

 webpack打包时借助 compression webpack plugin实现gzip压缩  


  


  
，安装插件如下：npm i -D compression-webpack-plugin

在vue-cli 3.0 中     
     
     
，vue.config.js配置如下：

const CompressionPlugin = require(compression-webpack-plugin);//引入gzip压缩插件 module.exports = { plugins:[ new CompressionPlugin({//gzip压缩配置 test:/\.js$|\.html$|\.css/,//匹配文件名 threshold:10240,//对超过10kb的数据进行压缩 deleteOriginalAssets:false,//是否删除原文件 }) ] }

服务器nginx开启gzip:

3.依赖模块采用第三方cdn资源 

修改vue.config.js

module.exports = { ... externals: { vue: Vue, vuex: Vuex, vue-router: VueRouter, element-ui: ELEMENT } ... }

4.禁止生成map文件

在vue.config.js配置：

module.exports = { productionSourceMap: false, // 生产环境是否生成 sourceMap 文件




   




   




 ，一般情况不建议打开 }

在设置了productionSourceMap: false之后
 



 



 
，就不会生成map文件               ，map文件的作用在于：项目打包后 




    




    




 ，代码都是经过压缩加密的












，如果运行时报错               ，输出的错误信息无法准确得知是哪里的代码报错  

   

   

。也就是说map文件相当于是查看源码的一个东西

     

     

    。如果不需要定位问题  



     



     



 ，并且不想被看到源码












，就把productionSourceMap 置为false    
    
    
，既可以减少包大小   


     


     


，也可以加密源码  




  




  


。

5.去掉代码中的console和debugger

打包之后控制台很干净



 




 




 ，部署正式环境之前最好这样做  


  


  


。

configureWebpack: config => { if (process.env.NODE_ENV === production) { config.optimization.minimizer[0].options.terserOptions.compress.warnings = false config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = [console.log] } },

6. 预渲染配置

使用插件：prerender-spa-plugin 

vue.config.js中配置如下：

const PrerenderSpaPlugin = require(prerender-spa-plugin); const Render = PrerenderSpaPlugin.PuppeteerRenderer; const path = require(path); configureWebpack: () => { if (process.env.NODE_ENV !== production) return; return { plugins: [ new PrerenderSPAPlugin({ // 生成文件的路径   

   

   
，也可以与webpakc打包的一致
     
     
   。 // 下面这句话非常重要！！！ // 这个目录只能有一级    

     

     

，如果目录层次大于一级




  




  




 ，在生成的时候不会有任何错误提示  


  


  
，在预渲染的时候只会卡着不动
   




   




   

。 staticDir: path.join(__dirname, dist), // 对应自己的路由文件     
     
     
，比如a有参数




   




   




 ，就需要写成 /a/param1 



 



 



。 routes: [/, /Login, /Home], // 这个很重要
 



 



 
，如果没有配置这段               ，也不会进行预编译 renderer: new Renderer({ inject: { foo: bar }, headless: false, // 在 main.js 中 document.dispatchEvent(new Event(render-event)) 




    




    




 ，两者的事件名称要对应上             。 renderAfterDocumentEvent: render-event }) }) ] }; }