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

「爱情、让人受尽委屈。」 2023-10-06 23:58 1阅读 0赞

![cef8b673963685887dd8de569074d190.png][]

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

### 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:

![d740cb9a289146c9b8afb6b016631d29.png][]

### 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中配置如下：

[cef8b673963685887dd8de569074d190.png]: https://img-blog.csdnimg.cn/img_convert/cef8b673963685887dd8de569074d190.png
[d740cb9a289146c9b8afb6b016631d29.png]: https://img-blog.csdnimg.cn/d740cb9a289146c9b8afb6b016631d29.png