Vue首屏加载过慢出现白屏的六种优化方案(vue加载速度慢)

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

推荐整理分享Vue首屏加载过慢出现白屏的六种优化方案(vue加载速度慢)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue首屏加载慢的原因,vue如何优化首屏加载速度,vue第一次打开慢,vue如何优化首屏加载速度,vue解决首屏加载慢,vue如何优化首屏加载速度,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' }) }) ] };}