vue项目优化

浅谈 Vue 项目优化

关于vue在app首次加载缓慢的解决办法

nginx开启缓存

在http部分加入

    #要想开启nginx的缓存功能,需要添加此处的两行内容!
#设置Web缓存区名称为cache_one,内存缓存空间大小为500M,缓存的数据超过1天没有被访问就自动清除;访问的缓存数据,硬盘缓存空间大小为30G
proxy_cache_path /usr/local/nginx/proxy_cache_path levels=: keys_zone=cache_one:500m inactive=1d max_size=30g; #创建缓存的时候可能生成一些临时文件存放的位置
proxy_temp_path /usr/local/nginx/proxy_temp_path; fastcgi_connect_timeout ;
fastcgi_send_timeout ;
fastcgi_read_timeout ;
fastcgi_buffer_size 256k;
fastcgi_buffers 256k;
fastcgi_busy_buffers_size 256k;
fastcgi_temp_file_write_size 256k;
fastcgi_intercept_errors on; client_header_timeout 600s;
client_body_timeout 600s; client_max_body_size 100m;
client_body_buffer_size 256k;

nginx开启gzip压缩

http部分加入

    gzip on;
gzip_min_length 5k;
gzip_buffers 16k;
#gzip_http_version 1.0;
gzip_comp_level ;
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;

nginx参考文档

nginx的web缓存服务环境部署记录

Nginx 启用gzip压缩

vue项目首次加载过慢的更多相关文章

  1. vue-router路由懒加载(解决vue项目首次加载慢)

    懒加载:----------------------------------------------------? 也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载? 像vue这种单 ...

  2. vue 页面首次加载缓慢原因及解决方案

    第一次打包vue的项目部署到服务器,发现首次加载特别的缓慢要几十秒才加载出来,完全没有在本地开发环境上那么流畅. 主要原因是页面在打包后没有进行相关的配置导致资源文件特别大,一次想要全部加载完成回特别 ...

  3. vue页面首次加载缓慢原因及解决方案

    第一次打包vue的项目部署到服务器下时,发现初次加载特别的缓慢,将近20s页面才加载出来,完全没有开发环境上的那么流畅.主要原因是页面在打包后如果不进行相关配置会导致资源文件特别的大,一次想要全部加载 ...

  4. vue-router中,require代替import解决vue项目首页加载时间过久的问题

    vue的路由配置文件(routers.js),一般使用import引入的写法,当项目打包时路由里的所有component都会打包在一个js中,在项目刚进入首页的时候,就会加载所有的组件,所以导致首页加 ...

  5. 在Vue项目中加载krpano全景图

    在Vue-cli项目中做krpano全景图编辑器的时候,由于js插件的路径是动态的,做的过程中遇到了加载不到资源的难题,在网上搜索了好久也没找到合适的办法,最后想到了可能是JS加载的问题,于是解决了问 ...

  6. vue项目未加载完成前显示loading...

    1.在Index.html里面加入loading的元素,让loading元素显示,让app元素隐藏 <!DOCTYPE html> <html> <head> &l ...

  7. vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案

    # vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案 最近做项目发现一个问题,页面每次刷新后加载速度都非常慢,20s左右,在开发环境则非常流畅,几乎感觉不到,本文参考望山的各种方案优化 1,关闭打 ...

  8. vue--按需加载的3种方式(解决网页首次加载速度慢的问题)

    一.vue的异步组件加载 使用异步组件加载,打包的时候会将每个组件分开打包到不同的js文件中: {path: '/index', name: 'index', meta:{ title:'首页', r ...

  9. vue单页应用首次加载太慢之性能优化

    问题描述: 最近开发了一个单页应用,上线后发现页面初始加载要20s才能完成,这就很影响用户体验了,于是分析原因,发现页面加载时有个 vendor.js达到了3000多kb,于是在网上查找了一下原因,是 ...

随机推荐

  1. [转帖]UML各种图总结-精华

    UML各种图总结-精华 https://www.cnblogs.com/jiangds/p/6596595.html 之前自己以为画图很简单 不需要用心学 现在发现自己一直没有学会一些基础的知识 能力 ...

  2. ubuntu安装命令

    sudo apt-get update  更新源sudo apt-get install package 安装包sudo apt-get remove package 删除包sudo apt-cach ...

  3. 将ubuntu14.04 从mysql从5.5删除之后安装5.7遇到的一些问题(本篇不讨论热升级)

    五一放假实在无聊 继续玩弄新的服务器.发现有台mysql版本实在有点老,估计是akiho直接使用 apt-get install mysql-server ,然后又没有更新到最新的源,然后无脑安装了5 ...

  4. js regex variable & Set, Map

    js regex variable & Set, Map regex, variable, Set, Map, 交集, 差集, 并集, https://stackoverflow.com/qu ...

  5. Python面向对象静态方法,类方法,属性方法

    Python面向对象静态方法,类方法,属性方法 属性: 公有属性 (属于类,每个类一份) 普通属性 (属于对象,每个对象一份) 私有属性 (属于对象,跟普通属性相似,只是不能通过对象直接访问) 方法: ...

  6. MyBatis学习(七)MyBatis关联映射之多对多映射

    对于数据库中的多对多关系建议使用一个中间表来维护关系. 1.创建四张表,分别为用户表,商品表,订单表,中间表. DROP TABLE IF EXISTS `t_user`; CREATE TABLE ...

  7. 51Nod 2006 飞行员配对(二分图最大匹配)

    第二次世界大战时期,英国皇家空军从沦陷国征募了大量外籍飞行员.由皇家空军派出的每一架飞机都需要配备在航行技能和语言上能互相配合的2名飞行员,其中1名是英国飞行员,另1名是外籍飞行员.在众多的飞行员中, ...

  8. 自学Zabbix4.3 zabbix实战监控Web网站性能

    自学Zabbix4.3 zabbix实战监控Web网站性能 用zabbix如何监控web性能和可用性呢?一般分为四个步骤:打开网站.登陆.登陆验证.退出,看实例. 1. 检测流程 1. 打开网站:如果 ...

  9. SQL Server 查

    注:where语句是条件,后面加and或者or 时间日期:比时间需要时间加引号 模糊查询:where语句后面加like  '%包含此关键字%'或者'以此关键字开头%'或者'%结尾' 排序查询:列名 o ...

  10. 两场CF

    分别是正规赛998和虚拟赛935 998我神速A了前三题之后挂了,第四题是一个打表找规律题然而我并没有想到打表... 然后靠着速度拿到470名,上了蓝名.这告诉我们:输入数据是一个数/两个数(noip ...