Vue首屏白屏如何解决

102 阅读1分钟

1、路由懒加载

2、vue-cli开启打包压缩 和后台配合 gzip访问

3、进行cdn加速

4、开启vue服务渲染模式

5、用webpack的externals属性把不需要打包的库文件分离出去,减少打包后文件的大小

6、在生产环境中删除掉不必要的console.log

plugins: [
    new webpack.optimize.UglifyJsPlugin({ //添加-删除console.log
      compress: {
        warnings: false,
        drop_debugger: true,
        drop_console: true
      },
      sourceMap: true
    }),

开启nginx的gzip ,在nginx.conf配置文件中配置

http {  //在 http中配置如下代码,
   gzip on;
   gzip_disable "msie6"; 
   gzip_vary on; 
   gzip_proxied any;
   gzip_comp_level 8; #压缩级别
   gzip_buffers 16 8k;
   #gzip_http_version 1.1;
   gzip_min_length 100; #不压缩临界值
   gzip_types text/plain application/javascript application/x-javascript text/css
    application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
 }

添加loading效果,给用户一种进度感受