vue单页项目常用优化

vue项目是单页应用,项目在第一次加载的时候会将大部分内容都加载进来,故而会导致加载很慢,以下是优化方案:

1.使用cdn加载一些不常变化的文件,比如用到的UI框架,vue脚手架相关的文件 (参见vue项目优化--引入cdn文件)

2.将静态的js,css以及图片放到第三方服务器

3.按需加载路由

4.webpack-parallel-uglify-plugin 可以优化打包js文件

5.在代码层面进行优化:

(1) 将重复的功能分块提取出来,封装成组件,让代码进行有效的复用

(2) 尽量利用computed属性代替for循环来渲染数据

(3) 提取公共方法,减少js代码量

(4) 提取公共的样式,减少页面样式的代码量

(5) 按照功能设置打包的代码块

(6) 尽量用v-if 代替v-show.因为v-show为false只是设置页面的功能模块不可见,它还是会渲染. 而v-if为false,则不会渲染该模块的功能

目前只想到这么多了,后面有想到的再补充

vue单页项目常用优化相关推荐

prerender html5,HTML5 VUE单页应用 SEO 优化之预渲染（prerender-spa-plugin）
前言:当前 SPA 架构流行的趋势如日中天,前后端分离的业务模式已经成为互联网开发的主流方式,但是单页面应用始终存在一个痛点,那就是 SEO, 对于那些需要推广,希望能在百度搜索时排名靠前的网站而 ...
bootstrap-pagination数据全部加载到前端再进行处理_求助！vue单页项目如何改造路由使其能够进行分模块打包？...
最近遇到一个很难解决的问题,搜索了百度谷歌都没有相关的资料,有可能是我搜索的关键词不对或者是需要我换一种思路去解决,希望各位大佬能帮忙看一下怎么解决.问题目前是这样的,目前有个基于VUE的单页后台项目 ...
vue单页项目中判断有没有上一页
场景:判断一个页面有没有上一页,没有就关闭页面,有的话就返回上一页测试了多种方法后,最后用window.sesstionStorage 结合router.afterEach实现了. 我解决的思路: ...
手把手教你做VUE单页应用SEO优化
前言最近写了个门户网站使用vue做的,不可避免的遇到了SEO方面相关的问题,下面将我采用的解决方案贴出来供大家参考主流的方案 1.SSR服务器渲染: 2.静态化: 3.Nuxt: 4.预渲染pre ...
基于vue单页应用的例子
代码地址如下: http://www.demodashi.com/demo/13374.html 目录结构 - src目录主要的代码目录 - components 存放项目组件 - router 路 ...
简述vue单页应用与多页应用的区别
简述vue单页应用与多页应用的区别文章目录简述vue单页应用与多页应用的区别前言一.Vue单页应用是什么? 内部原理: 二.Vue多页应用是什么? 内部原理: 三.它俩有啥区别? 四.总结前 ...
解决vue单页路由跳转后scrollTop的问题
作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部在我们写路 ...
Vue 单页应用与多页应用的区别
Vue 单页应用与多页应用的区别概念: ● SPA单页面应用(SinglePage Web Application),指只有一个主页面的应用,一开始只需要加载一次js.css等相关资源.所有内容都包 ...
VUE单页应用首屏加载速度优化方案
单页应用会随着项目越大,导致首屏加载速度很慢!!!以下给出在下知道的几种优化方案使用CDN资源,减小服务器带宽压力路由懒加载将一些静态js css放到其他地方(如OSS),减小服务器压力按需加 ...

vue单页项目常用优化

vue单页项目常用优化相关推荐

最新文章

热门文章