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. 防止xss攻击。

    function htmlEscape(text){ return text.replace(/[<>&\"=]/g,function(match,pos,origina ...

  2. 彻底弄懂jsonp原理及实现方法

    一. 同源策略 所有支持Javascript的浏览器都会使用同源策略这个安全策略.看看百度的解释: 同源策略,它是由Netscape提出的一个著名的安全策略. 现在所有支持JavaScript 的浏览 ...

  3. [转帖] .NET FrameWork 版本的确定方法

    检测电脑安装的net framework版本   https://msdn.microsoft.com/en-us/library/hh925568(v=vs.110).aspx To find .N ...

  4. python 字符串内置方法实例

    一.字符串方法总结: 1.查找: find(rfind).index(rindex).count 2.变换: capitalize.expandtabs.swapcase.title.lower.up ...

  5. jquery Ajax noConflict()

    如果幾個框架都在使用$作為標識符,那麼這個時候可以使用noConflict()處理衝突. 可以直接使用jquery代替簡寫,也可以定義變量,也可以將$賦值給ready函數,函數內部可以使用快捷方式,不 ...

  6. jquery 加載

    load(url,data,callback)從遠程服務器加載數據,并放入到被選中元素上: url是必須有的,希望加載的url: data是可選的,表示和請求一起發送的鍵值對數據: callback是 ...

  7. jquery 祖先、子孫、同級

    jquery向上遍歷,獲取祖先元素 parent()獲取選中元素的父 parents()獲取選中元素的所有的祖先節點,一直到文檔的根元素<html> parentUntil(“元素1”)獲 ...

  8. SP5973 SELTEAM - Selecting Teams

    SP5973 SELTEAM - Selecting Teams [题目描述] 他已经有 n 个心仪的妹子了,但随着时间的流逝,只有 m(1<=m<=k)个直伴随在他的身边,而小小迪发现他 ...

  9. day11 匿名函数

    格式 lambda 形参 :逻辑运算方式 lambda x:x+1 普通的方式计算 卧槽.这么长! def calc(x): return x+1 res = calc(10) print(res) ...

  10. MT【213】二次曲线系方程

    (2013北大夏令营)函数$y=x^2+ax+b$与坐标轴交于三个不同的点$A,B,C$,已知$\Delta ABC$的外心$P$在$y=x$上,求$a+b$的值. 解:由二次曲线系知识知三角形的外接 ...