最近在项目前端使用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的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。