最近在项目前端使用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-plugin2、在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.jsconst 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.jsvue的路由器模式需要设置为历史模式。
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性能优化内容,请搜索我们之前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们!