亲宝软件园·资讯

展开

Vue首屏加载过慢出现白屏的6种优化方案汇总

1024小神 人气:0

前言

公司业务展示官网开发,构建版本后在测试环境下,发下首屏加载损耗高达几十秒(服务器在国外,所以也导致加载时间变长),于是采用了以下方法来达到提速目的。 

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'
        })
      })
    ]
  };
}

总结

加载全部内容

相关教程
猜你喜欢
用户评论