项目上线后首次加载慢的解决方案

2023-11-05

1、使用路由懒加载(开发时尽量使用路由懒加载)

component: resolve => require(['放入需要加载的路由地址'], resolve)

2、使用gzip压缩(最高效,至少压缩一倍)

npm install --save-dev compression-webpack-plugin@1.1.12


  在build/webpack.prod.conf.js 文件中添加配置:

// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// 定义压缩文件类型
const productionGzipExtensions = ['js', 'css'];
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
     filename: '[path].gz[query]',
     algorithm: 'gzip',
     test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
     threshold: 10240,
     minRatio: 0.8
   })
)

3、后端端口也需要做好相关配置

# 开启gzip
gzip on;
# 启用gzip压缩的最小文件,小于设置值的文件将不会压缩
gzip_min_length 1k;
# 设置压缩所需要的缓冲区大小
gzip_buffers 16 64k;
# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.1;
# gzip 压缩级别,1-9,数字越大压缩的越好,也越占用CPU时间
gzip_comp_level 3;
gzip_types text/plain application/x-javascript application/javascript text/javascript text/css application/xml application/x-httpd-php image/jpeg image/gif image/png;
# 是否在http header中添加Vary: Accept-Encoding,建议开启       
gzip_vary on;
4、最后重启下服务就好啦。响应速度加快了10s左右.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

项目上线后首次加载慢的解决方案 的相关文章

随机推荐

  • openid和unionid的区别

    openid和unionid的区别 1 微信openid和unionid长度是不一样的 openid 28 unionid 29 2 openid同一用户同一应用唯一 unionid同一用户不同应用唯一 这里的不同应用是指在同一微信开发平台
  • C++学习6

    堆 是存在于某个作用域的一个内存空间 例如 当你调用函数 函数本身会形成一个栈用来放置它所接收的参数 以及返回地址 栈 由操作系统提供的一个全局的内存空间 程序可动态分配 内存管理 生命周期 栈对象 离开堆的作用域 会调用对象的析构函数 内
  • rabbitmq分布式事务解决方案

    发送消息到mq 流程 用户下订单创建订单信息 且创建一条订单冗余信息 status 为 0 发送订单信息到mq 使用ack 消息确认机制 确认消息发送成功修改订单状态为 1 表示消息已发送 启动一个定时任务 排查 订单状态为 0 的订单 发
  • Win2003搭建网站教程

    1 搭建Win2003虚拟机 此过程略 2 开始 管理您的服务器 添加或删除角色 3 下一步 配置您的服务器向导 选择应用程序服务器 IIS asp NET 下一步 完成安装 4 打开 开始 管理工具 Internet信息服务器 IIS 管
  • 使用certbot 生成 Let‘s Encrypt 泛域名ssl证书

    文章目录 一 更新证书报错 二 Let s Encrypt 泛域名ssl证书申请 一 更新证书报错 问题描述 更新SSL证书时报 too many failed authorizations 错误 原因分析 当前要更新的域名一个小时触发失败
  • 扫码支付终结刷脸支付强势掘起

    手机支付将会終结 新的支付方式掘起 新的支付方式对很多人还是很陌生的 这就要很好的推广和布置 现在推出了二代的蜻蜓刷脸设备 向商户销售出了舒缓的二代蜻蜓刷脸支付设备 超市 快餐厅 自动贩卖机都已经实现商业直播 相信很快在每个城市 都会发现这
  • 快速排序详解

    近些天来 由于需要找工作 特将数据机构与算法中的快速排序温习总结了一下 希望对于大家学习有所帮助 首先 快速排序的基本思想是基于分治的思想 是冒泡排序的改进型 首先在数组中选择一个基准点 该基准点的选取可能影响快速排序的效率 后面讲解选取的
  • Git提交代码的两种方式

    一 Git Bash提交方式 在电脑桌面鼠标右键点击一下 然后点击Git Bash Here 开始输入命令 1 首次提交 先输入github gitlab等的用户名和邮箱 git命令 git config global user name
  • 【Altium Designer21】使用小技巧

    1 如何取消原理图的网格以及表头如下图 在Properties Visible Grid可以显示 隐藏网格 Title Block勾选上即显示表头 取消勾选即隐藏表头 图1 图2 图3 2 翻转的快捷键 空格 为90翻转 X 为水平翻转 Y
  • Eclipse 启动异常 找不到Java环境(A Java Runtime Environment....)

    点击启动Eclipse弹出异常消息 解决步骤 1 打开eclipse所在文件夹 2 用记事本打开配置文件 即下图的文件 3 找到java所在文件夹 4 复制路径并粘贴到记事本文件中 5 保存并重启Eclipse 大功告成
  • [算法]力扣刷题-动态规划 - 不同路径

    目录 题目 思路 编码 分析 修改 优化 题目 一个机器人位于一个 m x n 网格的左上角 起始点在下图中标记为 Start 机器人每次只能向下或者向右移动一步 机器人试图达到网格的右下角 在下图中标记为 Finish 问总共有多少条不同
  • Junit的基本使用(详解)

    什么是Junit Junit是xUnit的一个子集 在c paython java语言中测试框架的名字都不相同 xUnit是一套基于测试驱动开发的测试框架 其中的断言机制 将程序预期的结果与程序运行的最终结果进行比对 确保对结果的可预知性
  • Java代码质量检查工具及使用案例

    前言 在现在的软件开发中 由于软件的复杂度越来越高 业务也覆盖很广 各个业务模块业务错综复杂 这样就需要我们需要团队开发 在我们团队中开发人员的经验 代码风格样式都不一致 以及缺乏统一的标准 从而导致我们的整个项目的的代码难以阅读 不便于后
  • 顺序表实现图书管理系统增删改查

    顺序表学习 这个程序是用于学习数据结构而参考数据结构C语言第二版的教材实现的一个简易的图书管理系统 逻辑结构 顺序表 线性表的顺序存储又称作顺序表 由一组地址连续的存储单元依次存储线性表的数据元素 从而使得逻辑上相邻的两个元素在物理位置上也
  • 浅谈中断挂起与中断标志的区别

    中断挂起 如果中断发生时 正在处理同级或高优先级异常 或者被掩蔽 则中断不能立即得到响应 此时中断被悬起 悬挂意味着等待而不是舍去 当优先级高的或者同等级先发生的中断完成后 被挂起的中断才会执行 中断的悬起状态可以通过 中断设置悬起寄存器
  • STM32学习之ADC(模拟数字转换器)

    目录 ADC的定义及其类型 ADC 单通道独立规则模式 对于该模式的理解 通道及ADC分配 时钟配置 GPIO配置 ADC模式配置 校准 读取ADC 代码 野火的开源代码 由于大二学生一枚 水平有限 文中自己的理解难免出错 恳请道友发现后能
  • 【面试题】封装/继承/多态

    面向对象 C语言是面向过程的 关注的是过程 分析出求解问题的步骤 通过函数调用逐步解决问题 C 是基于面向对象的 关注的是对象 将一件事情拆分成不同对象 靠对象之间的交互完成 面向对象程序设计 Object oriented program
  • 算法帝国:华尔街交易怪兽的核武器缔造史

    这是一段通俗的读物 更是一段算法交易的历史钩沉 华尔街的每个角落逐渐被算法所侵蚀 思考者 依然还是拖着额头 但却不得不接受未来的现实 1980年华尔街的黑客生涯 天时地利 20世纪70年代末期 算法开始进入人们的工作 这一趋势席卷了世界各地
  • 小程序WXML,WXSS与原生HTML,CSS,JS之间的区别

    一 WXML 的概念以及和 HTML 之间的区别 1 什么是 WXML WXML WeiXin Markup Language 是框架设计的一套标签语言 组件 用来构建小程序页面的结构 其作用类似于网页开发中的 HTML 2 WXML 和
  • 项目上线后首次加载慢的解决方案

    1 使用路由懒加载 开发时尽量使用路由懒加载 component resolve gt require 放入需要加载的路由地址 resolve 2 使用gzip压缩 最高效 至少压缩一倍 npm install save dev compr