专栏首页司夜的专栏vue单页面应用首次访问速度优化
原创

vue单页面应用首次访问速度优化

应用背景:应用采用前后端分离开发,前端直接使用nginx部署vue打包文件提供访问需要;

问题阐述:vue大页面应用直接npm run build进行打包,前端部署后首次访问速度缓慢,基本需要40秒左右,也有一部分原因是因为我的服务器只有1M的网,打出来的js文件最大的有4M+导致,因自己并非前端开发,只处于刚刚能应付数据展示再前台的地步,所以这个问题让我甚是苦恼;

解决方法:

0、工具使用查看各个js占用的大小

工具使用webpack.prod.conf.js 中 增加 const BundleAnalyzerPlugin = require('webpack-bundle- analyzer').BundleAnalyzerPlugin;

new BundleAnalyzerPlugin(),

如图:

文件配置
打包后各个文件大小占比

加好之后npm run build 自动会打开localhost:8888,即可看到各个文件占用比例,针对文件处理即可

1、网上普遍答复都是懒加载组件(实际测试中效果不是特别明显)

main.js 中修改组件引用写法:

const tabar = resolve => require(['./components/tabar'], resolve)

Vue.component('tabar', tabar);

即可做到使用时才加载的效果,但是初次加载时候还是会有很大的文件

2、改为cdn引用(强烈推荐)

因为我自身的服务器只有1M的网速,文件大的问题有时候就算压缩也是解决不了的,有些非常公用的插件bootstrap vue jquery css之类的建议使用cdn外部引用,如图

cdn引入

我本身构建vue的包后,最大的文件快5M,实在太大了,使用cdn公共服务器引入后,大概能缩小到1m,但是这样也不是我们 最终的大小,继续优化。

3、npm install --save-dev compression-webpack-plugin@1.1.12 强烈推荐

compression插件使用:

webpack.prod.conf.js文件下增加const CompressionPlugin = require('compression-webpack-plugin')

new CompressionPlugin({

test: /\.(js|css)?$/i, // 哪些文件要压缩

filename: '[path].gz[query]', // 压缩后的文件名

algorithm: 'gzip', // 使用gzip压缩

minRatio: 1 // 压缩率小于1才会压缩

// deleteOriginalAssets: true // 删除未压缩的文件,谨慎设置,如果希望提供非gzip的资源,可不设置或者设置为false

}),

对js及css进行压缩处理,效果是立竿见影的,直接将250kb文件压缩到了50kb

compression配置

4、nginx配置修改 nginx部署必备(强烈推荐)

server中增加

gzip on;

    gzip_buffers 32 4K;

    gzip_comp_level 6;

    gzip_min_length 100;

    gzip_types application/javascript text/css text/xml application/json;

    gzip_vary on;

大概可以让文件再缩小一半,通过以上优化,我的1m网速服务器基本可以做到1秒左右打开服务器(有时候取决于cdn的网速, 很关键)

总结:以上优化操作,基本可以将我最初40秒初始访问页面速度提升到1、2秒,文件请求大概缩小到50kb左右

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 优化页面访问速度(四) ——前端优化

    前端的优化,主要可以通过减少HTTP请求、非实时请求改异步、缓存、文件压缩、CDN加速、独立图片服务器等。

    用户1327360
  • 优化页面访问速度(一)——综述

    优化页面访问速度,首先需要了解用户在浏览器输入url后,最终是如何看到所需的页面。在了解整个流程后,可以逐个步骤进行优化。

    用户1327360
  • 优化页面访问速度(三) ——服务端优化

    服务端的优化,主要可以通过消息队列、减少数据库请求(缓存)、并发处理、页面静态化等方式处理。

    用户1327360
  • 优化页面访问速度(二) ——数据库优化

    数据库优化,主要包括数据表设计、索引、sql语句、表拆分、数据库服务器架构等方向的优化。

    用户1327360
  • VUE项目性能优化实践——通过懒加载提升页面响应速度

    最近我司因业务需求,需要在一个内部数据分析平台集成在线Excel功能,既然我们自己就是做开发工具的,所以目光自然就落在了我司自研的前端表格产品上。

    葡萄城控件
  • Vue webpack 压缩打包上线 首屏加载时间过长 优化方案

    最近博客上线,但是在首次加载的时候,需要消耗很多时间,大概在50秒左右,就是说第一页登录页面,就需要用户等待50秒(服务器是最低配置也是一个原因),看了一下ne...

    Coxhuang
  • Vue 的打包优化之路Vue的打包优化之路

    ECharts的JSON地图文件占了很大一部分,大概有1.96MB gzip以后900KB,这一部分是没有办法做处理的。然后ECharts也应该使用按需加载

    MrTreasure
  • 动态构建的多页面vue-cli模版

    vue官方提供了几个vue cli的模版,但都单页面模版,然而在真实的业务场景下还是有多页面模版的需求,百度和google上都能搜索到不少单页面模版改多页面模版...

    easonxie
  • 【Vuejs】335-(超全) Vue 项目性能优化实践指南

    Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作...

    pingan8787
  • Vue首屏加载速度优化,提升80%以上

    这是优化前的页面加载状态:执行npm run build打包项目,出来的vendeor.js文件,基本都是1M以上的的巨大文件,没有用户能忍受5s...

    用户1308196
  • 「前端架构」React,Angular和Vue:哪一个最好,我选Angular

    在当今的发展世界中,技术正在快速增长并且变化迅速,许多开发工具似乎可以解决不同的开发问题。在本次讨论中,我们将比较三种最流行的前端开发技术--Angular,R...

    首席架构师智库
  • 页面性能优化的五种办法

    大部分用户希望网页能在 2 秒之内就完成加载。事实上,加载时间每多 1 秒,你就会流失 7% 的用户。如果加载需要太长时间,他们就会放弃访问。

    小生方勤
  • Vue加载优化,速度提高一倍。

    之前做的一个Vue项目,流程大概是这这样的:从公众号进入,由外系统获取用户的openid等信息,然后再跳转到项目首页进行加载初始化操作。

    Java技术编程
  • vue博客实战---博客部署到腾讯云

    前三篇文章其实已经将博客部分的功能基本上走了一遍流程,博客部分还剩下的只有首页右侧导航栏动态渲染以及文章详情界面带评论功能尚待开发。本篇文章准备...

    创译科技
  • 基于 TVUE 框架在中型移动端项目的直出同构实践

    TVUE 框架是在 vuejs 框架基础上结合业务本身做的一系列优化,封装,改进的框架实践。本文只阐述和直出同构相关部分的内容,其它框架内的内容另行介绍。

    王鹤
  • 面试官:SPA(单页应用)首屏加载速度慢怎么解决?

    首屏时间(First Contentful Paint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完成,但需要...

    @超人
  • Vue项目打包编译优化

      默认情况下,当我们执行 npm run build 命令打包完一个项目后,会得到一个dist目录,里面有一个js目录,存放了该项目编译后的所有js文件。  ...

    文渊同学
  • 「真®全栈之路 - DNS篇」故事从输入URL开始.....

    但想着,这是别人嚼烂很多次的内容,缺乏挑战性,而且,页面操作过程中能优化的地方实在太多了。

    前端劝退师
  • 2019 Vue开发指南:你都需要学点啥?

    如果您是Vue开发的新手,您可能已经听过很多关于它的专业术语了,例如:单页面应用程序、异步组件、服务器端呈现等。

    葡萄城控件

扫码关注云+社区

领取腾讯云代金券