Vue首屏加载过慢出现长时间白屏_nprogress过慢-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_27824793/article/details/121541185

前言：本人第一次尝试写博客，如文章讲述不对的地方还望大家指出，多多包含，不胜感激！！

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

问题攻克解决步骤如下：

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,//是否删除原文件