vue首屏加载慢优化方案,vue页面加载慢
最近在项目前端使用vue技术，发现主页加载速度很慢。下面这篇文章主要介绍Vue的终极性能优化方案，主要解决主页加载慢的问题。有需要的朋友可以参考一下。
目录
前言1。路由懒加载2、从打包文件中移除地图文件3、在CDN中引入第三方库4、打包gzip 1、NPM I-D压缩-web pack-plugin 2、在vue.config.js中配置3、在NGINX中配置5、终极大招、预渲染总结1、CNPM安装预渲染-spa-plugin-save-dev2、vue.config.js 3、router.js4和main.js
前言
用vue的开发项目上线后，发现首页加载速度很慢，如果项目很大，甚至可能要等10s以上。用户体验很差。试想一下，如果你准备买一双AJ，登录某宝首页等了整整5s，那么你一定要果断选择某号。
以我们公司的项目为例。输入网址后，会出现十几秒的空白页面。后台管理系统可以接受的话，嵌套的H5面对的是C端用户，产品肯定不能接受。
仔细分析，主要原因是打包的app.js太大，我们报的一些插件安装包加载慢。我们在网上搜了很多解决加载慢的方案，最终优化时间移动端H5页面2秒多，后台管理系统5秒多。
1.路由懒加载
{
路径：“/chinaWine”，
名称：中国酒，
组件：resolve=require([。/views/chinaWine]，resolve)
},
这个方法会把原来打包的app.js文件拆分成多个js文件，这样会减小单个文件的大小，但不会减小整个js文件夹的大小。
这样，您可以按需加载，只加载单个页面的js文件。
2、打包文件中去掉map文件
打包的app.js太大，还有一些生成的地图文件。首先删除冗余的地图文件，
在config文件夹中找到index.js文件，并将此构建中的productionSourceMap更改为false。
3、CDN引入第三方库
在项目开发中，我们会用到很多第三方库。如果能按需引入，就只能引入需要的元器件，减少占用空间。
但是，有些不能按需导入。我们可以使用CDN外部加载，从index.html的CDN导入组件，去掉其他页面的组件导入，修改webpack.base.config.js，将这个组件添加到externals。这是为了避免编译过程中由于缺少组件而导致的错误。
4、gzip打包
Gizp压缩是一种http请求的优化方法，通过减小文件大小来提高加载速度。
Html、js、css文件甚至json数据都可以用它压缩，可以减少60%以上的体积。
1、npm i -D compression-webpack-plugin
2、在vue.config.js中配置
const compression plugin=require( compression-web pack-plugin )
configureWebpack: config={
if(process . ENV . node _ ENV=== production ){
返回{
插件：[新压缩插件({
测试：/\。js$\。html$\。css/，
门槛：10240，
deleteOriginalAssets: false
})]
}
}
}
3、在NGINX中配置
http {
gzip打开；
gzip _ min _ length 1k
gzip _ buffers 4 8k
gzip _ http _ version 1.0
gzip _ comp _ level 8；
gzip _ proxied any
gzip _ types application/JavaScript text/CSS image/gif；
gzip _ vary on
gzip_disable MSIE [1-6]\ ；
#下面的配置被省略。
}
Nginx -s重载：重载在修改配置后生效。
5、终极大招，预渲染
其实以上优化完成后，优化到5秒以内是没问题的，但是如果我们公司的前端页面超过100个，可能还是有点慢。
上面我们做了这么多，都是基于js执行后的渲染。如果想更快，有两种方案，一种是ssr，即服务器端渲染，另一种是预渲染。
预渲染就是在js加载之前生成一个首页的静态页面，用于加载。不会让你久等的。静态页面的性能就不用说了，唰。
预渲染依赖于pre-render-spa-plugin插件，使用起来也非常简单。然而，有太多的坑，如果一个地方不被尊重，将报告一个错误：
1、cnpm install prerender-spa-plugin --save-dev
推荐用淘宝镜像的cnpm，因为npm安装经常失败，一个教训要花一上午。
2、vue.config.js
const path=require( path )；
const PrerenderSPAPlugin=require( prerender-spa-plugin )；
const Renderer=PrerenderSPAPlugin。木偶师；
在“插件”下，找到插件对象并将其直接添加到其中。
//预渲染配置
新的PrerenderSPAPlugin({
//Require-给定的WebPack-要预呈现的输出应用程序的路径。
staticDir: path.join(__dirname， dist )，
//必选，要渲染的路线。
路由：[/login]，
//必须是要使用的实际渲染器，没有它就无法预编译。
渲染器：新渲染器({
注入：{
foo:“酒吧”
},
Headless: false，//渲染时显示浏览器窗口。对调试非常有用。
//等待呈现，直到检测到指定的元素。
//例如，在项目入口处使用“document . dispatch event(new event( custom-render-trigger )”。
renderAfterDocumentEvent:“渲染事件”
})
})
3、router.js
vue的路由器模式需要设置为历史模式。
4、main.js
在已创建的vue实例的mounted中添加一个事件，对应于PrerenderSPAPlugin实例中的renderAfterDocumentEvent。
已安装(){
document.dispatchEvent(新事件( render-event ))
},
这是预渲染的基本配置。npm运行构建它。如果dist文件夹中还有更多你想预渲染的文件夹，那么恭喜你，成功了！如果项目是nginx做的代理，nginx还需要做一些配置，具体来说：
位置=/{
try _ files/home/index . html/index . html；
}
位置/{
try _ files $ uri $ uri//index . html；
}
根据自己的需求，要渲染的路线要自己匹配。
虽然实现预渲染花了一天时间，但是因为之前项目使用了哈希路由，所以预渲染需要改成历史模式，需要修改登录地址。我们公司用了上千个终端商户，计划被迫流产。但是真的很快，而且适合自己的背景和新项目。
总结
关于vue的终极性能优化方案(解决主页加载慢的问题)的这篇文章就到此为止。更多相关vue ultimate性能优化内容，请搜索我们之前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。