文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue怎么解决首页加载慢的问题

2023-06-29 06:44

关注

这篇文章主要讲解了“vue怎么解决首页加载慢的问题”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue怎么解决首页加载慢的问题”吧!

1.路由懒加载

{    path: '/chinaWine',    name: 'chinaWine',    component: resolve => require(['./views/chinaWine'], resolve)},

此方法会把原本打包到一个app.js文件分开成多个js文件打包,这样会减小单个文件的大小,但是不会减小整个js文件夹的大小。

通过这种方式可以做到按需加载,只加载单个页面的js文件。

2、打包文件中去掉map文件

打包的app.js过大,另外还有一些生成的map文件。先将多余的map文件去掉,

找到config文件夹下index.js文件,把这个build里面的productionSourceMap改成false即可

3、CDN引入第三方库

在项目开发中,我们会用到很多第三方库,如果可以按需引入,我们可以只引入自己需要的组件,来减少所占空间,

但也会有一些不能按需引入,我们可以采用CDN外部加载,在index.html中从CDN引入组件,去掉其他页面的组件import,修改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 CompressionPlugin = require('compression-webpack-plugin')configureWebpack: config => {    if (process.env.NODE_ENV === 'production') {        return {            plugins: [new CompressionPlugin({                test: /\.js$|\.html$|\.css/,                threshold: 10240,                deleteOriginalAssets: false            })]        }    }}

3、在NGINX中配置

http {    gzip  on;    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 reload :修改配置后重新加载生效

5、终极大招,预渲染

其实把上面的优化做完,优化到5秒以内没问题了,但是如果像我司前端页面100多个,比较大的项目,可能还是会有点慢。

上面我们做了那么多,都是基于js执行完以后进行的渲染,如果想要更快一点,还有两种方案,一种是ssr也就是服务端渲染,一种就是预渲染。

预渲染是在js加载前,就生成了一个首页的静态页面,用于加载,不会让你等着了,静态页面的性能不用说了吧,嗖嗖的。

预渲染依赖的是prerender-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.PuppeteerRenderer;在plugins下面,找到plugins对象,直接加到上面就行// 预渲染配置new PrerenderSPAPlugin({    //要求-给的WebPack-输出应用程序的路径预渲染。    staticDir: path.join(__dirname, 'dist'),    //必需,要渲染的路线。    routes: ['/login'],    //必须,要使用的实际渲染器,没有则不能预编译    renderer: new Renderer({        inject: {            foo: 'bar'        },        headless: false, //渲染时显示浏览器窗口。对调试很有用。          //等待渲染,直到检测到指定元素。        //例如,在项目入口使用`document.dispatchEvent(new Event('custom-render-trigger'))`         renderAfterDocumentEvent: 'render-event'    })})

3、router.js

需要把vue的router模式设置成history模式

4、main.js

在创建vue实例的mounted里面加一个事件,跟PrerenderSPAPlugin实例里面的renderAfterDocumentEvent对应上。

mounted () {    document.dispatchEvent(new Event('render-event')) },

这是预渲染的基本配置,npm run build 一下,如果dist文件夹多了你想预渲染的文件夹,那么恭喜你,成功了!如果项目是用nginx做的代理,nginx还需要做一些配置,具体是:

location = / {  try_files /home/index.html /index.html;}location / {  try_files $uri $uri/ /index.html;}

具体的根据自己需要欲渲染的路由自己配

感谢各位的阅读,以上就是“vue怎么解决首页加载慢的问题”的内容了,经过本文的学习后,相信大家对vue怎么解决首页加载慢的问题这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯