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. [转帖]Nginx安装及配置详解 From https://www.cnblogs.com/zhouxinfei/p/7862285.html

    Nginx安装及配置详解   nginx概述 nginx是一款自由的.开源的.高性能的HTTP服务器和反向代理服务器:同时也是一个IMAP.POP3.SMTP代理服务器:nginx可以作为一个HTTP ...

  2. centos目录

    cd /opt cd /home/lujie cd /etc cd /usr cd /dev cd /bin cd /mnt cd /media cd /tmp

  3. 软件工程_10th weeks

    不管是什么原因,都没有在周三24:00前发布博客,赶紧用行动补上~ psp DATE START_TIME END_TIME EVENT TYPE     DELTA 5.8 9:00 12:00 论 ...

  4. ava 8中的新功能特性

    正如我之前所写的,Java 8中的新功能特性改变了游戏规则.对Java开发者来说这是一个全新的世界,并且是时候去适应它了. 在这篇文章里,我们将会去了解传统循环的一些替代方案.在Java 8的新功能特 ...

  5. js timeout

    setTimeOut(“”,毫秒):調用函數時,不是立刻執行,而是間隔一定的時間后在執行: clearTimeOut():清除計時器

  6. maven依赖有一个步长原则 如果a 对 b和c都有依赖 如果b的步长近则使用b的

    maven依赖有一个步长原则 如果a 对 b和c都有依赖 如果b的步长近则使用b的

  7. checkStyle 错误普及

    1Type is missing a javadoc commentClass  缺少类型说明 2“{” should be on the previous line“{” 应该位于前一行.解决方法: ...

  8. jenkins--svn+添加钩子去触发jenkins的job工作

    找到svn钩子脚本 post-commit: 添加一个接口: /usr/bin/curl http://admin:admin@x.x.x.x:8080/job/svn/buildWithParame ...

  9. copy elison & RVO & NRVO

    蓝色的博文 To summarize, RVO is a compiler optimization technique, while std::move is just an rvalue cast ...

  10. Shell基础知识(六)

    shell中有很多内建命令,如何区分内建命令与外部文件,使用type command即可看到命令类型. >> type cd # input << cd is a Shell ...