Vue3项目上线打包优化
之前整理过 Vue2项目上线打包优化,在vue3中,使用vite打包,配置稍微改了改。
1 开启gzip压缩
1.1 安装依赖
npm i vite-plugin-compression -D
1.2 vite.config.ts 配置
import viteCompression from 'vite-plugin-compression'export default defineConfig({plugins: [// ...viteCompression({verbose: true, // 默认即可disable: false, //开启压缩(不禁用),默认即可deleteOriginFile: false, //删除源文件threshold: 10240, //压缩前最小文件大小algorithm: 'gzip', //压缩算法ext: '.gz' //文件类型})],
});
1.3 nginx 配置
在server节点下新增以下配置
server {listen 80;server_name localhost;# 追加如下配置gzip on;gzip_static on;gzip_buffers 4 16k;gzip_min_length 1k;gzip_comp_level 9;gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;gzip_vary on;gzip_disable "MSIE [1-6]";}
如果是打包成docker镜像,Dockerfile可配置如下:
FROM nginx:1.25.2-alpine-slimCOPY dist /usr/share/nginx/html/# 开启gzip压缩配置 RUN sed -i '/server_name localhost;/a \gzip on;\n\gzip_static on;\n\gzip_buffers 4 16k;\n\gzip_min_length 1k;\n\gzip_comp_level 9;\n\gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;\n\gzip_vary on;\n\gzip_disable "MSIE [1-6]";' /etc/nginx/conf.d/default.conf# 指定于外界交互的端口 EXPOSE 80
2 拆分 js & 追加时间戳
vite会将所有的js和css文件都打在一个文件夹下,assets目录,以下配置拆分js和css在不同目录下
vite.config.ts中新增节点build
let timeStamp = new Date().getTime()
export default defineConfig({//...build: {chunkSizeWarningLimit: 1500,rollupOptions: {output: {// 最小化拆分包manualChunks(id) {if (id.includes('node_modules')) {return id.toString().split('node_modules/')[1].split('/')[0].toString()}},// 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值entryFileNames: `js/[name].[hash]${timeStamp}.js`,// 用于命名代码拆分时创建的共享块的输出命名// chunkFileNames: `js/[name].[hash]${timeStamp}.js`,// 用于输出静态资源的命名,[ext]表示文件扩展名assetFileNames: `[ext]/[name].[hash]${timeStamp}.[ext]`,// 拆分js到模块文件夹chunkFileNames: chunkInfo => {const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/') : []const fileName = facadeModuleId[facadeModuleId.length - 2] || '[name]'return `js/${fileName}/[name].[hash]${timeStamp}.js`}}}}
})
3 ElementPlus按需加载
3.1 安装依赖
npm install -D unplugin-vue-components unplugin-auto-import
3.2 vite.config.ts 配置
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()]}),Components({resolvers: [ElementPlusResolver()]})]
})
3.3 main.ts
移除main.ts中的ElementPlus相关引入,包括css
css移除可能会导致 ElLoading、ElMessage 等样式失效,main.ts 中可以不移除
4 index.html 优化
4.1 页面缓存配置
解决每次发版都需要手动清除缓存的问题
<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="expires" content="0">
追加时间戳参考 # 2 拆分 js & 追加时间戳 章节
4.2 自动跳转https请求
在前后端配置http自动转https后,如果前端请求的后端接口还是http,则会报跨域
在index.html的head标签里面加入以下代码即可实现自动跳转https请求:
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
参考:https://blog.csdn.net/weixin_39809852/article/details/106575230
会强制跳转 https,如果是容器部署,可以采用变量的方式配置请求 url
5 变量暴露到容器
https://www.5axxw.com/questions/content/turw8a、https://www.cnblogs.com/ingstyle/p/14329474.html
如部署时动态配置后端的api baseUrl,单个变量可做如下配置
5.1 request.ts
axios封装时,baseURL改为动态获取,VITE_API_URL为环境配置文件 .env 中的变量
const baseUrl = () => {let querySelector = document.querySelector('html');if (querySelector) {const { promiseBaseUrl } = querySelector.datasetif (promiseBaseUrl && promiseBaseUrl.indexOf('http') === 0) {return `${promiseBaseUrl}`}}return import.meta.env.VITE_API_URL as any
}// axios实例
const service = axios.create({baseURL: baseUrl(),timeout: 60000,headers: { 'Content-Type': 'application/json;charset=UTF-8' }
})
5.2 Dockerfile
Dockerfile 里将变量配置到 index.html
FROM nginx:1.25.2-alpine-slimCOPY dist /usr/share/nginx/html/# 开启gzip压缩配置
RUN sed -i '/server_name localhost;/a \gzip on;\n\gzip_static on;\n\gzip_buffers 4 16k;\n\gzip_min_length 1k;\n\gzip_comp_level 9;\n\gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;\n\gzip_vary on;\n\gzip_disable "MSIE [1-6]";' /etc/nginx/conf.d/default.conf# 指定于外界交互的端口
EXPOSE 80
CMD ["/bin/sh", "-c", "sed -i \"s@<html@<html data-promise-base-url=\"$VITE_API_URL\"@\" /usr/share/nginx/html/index.html; nginx -g \"daemon off;\""]
打包完成,部署时即可使用VITE_API_URL环境变量指定后端URL
6 移除console日志输出
vite中已经集成了去除console和debugger的功能, 但没有terser插件,想要去除console和debugger, 必须先安装terser插件
npm install -D terser
vite.config.ts配置如下
import { defineConfig } from 'vite'
export default defineConfig({build: {minify: 'terser',terserOptions: {compress: {drop_console: true,drop_debugger: true}}}
})
相关文章:
Vue3项目上线打包优化
之前整理过 Vue2项目上线打包优化,在vue3中,使用vite打包,配置稍微改了改。 1 开启gzip压缩 1.1 安装依赖 npm i vite-plugin-compression -D1.2 vite.config.ts 配置 import viteCompression from vite-plugin-compressionexport defaul…...
【算法题】2525. 根据规则将箱子分类
题目: 给你四个整数 length ,width ,height 和 mass ,分别表示一个箱子的三个维度和质量,请你返回一个表示箱子 类别 的字符串。 如果满足以下条件,那么箱子是 “Bulky” 的: 箱子 至少有一个…...
python字典
字典 字典定义创建字典 字典定义 字典是python语言中唯一的映射类型。这种映射类型由键(key)和值(value)组成,是“键值对”的无序可变序列 定义字典时,每个元组的键和值用冒号隔开,相邻元素用…...
thinkphp队列的使用?
1.安装队列依赖 由于框架版本原因可以选择适合的版本 composer require topthink/think-queue 由于我是tp框架5.1的,所以选择了think-queue 1.1.6 composer require topthink/think-queue 1.1.6 判断安装成功 php think queue:work -h image.png 2.配置文件…...
【数据结构】排序--归并排序
目录 一 基本思想 二 代码实现 三 非递归归并排序 一 基本思想 归并排序(MERGE-SORT)是建立在归并操作上的一种有效的排序算法,该算法是采用分治法(Divide and Conquer)的一个非常典型的应用。将已有序的子序列合并ÿ…...
批量修改视频尺寸:简单易用的视频剪辑软件教程
如果你需要批量修改视频尺寸,同时保持高质量的画质,那么“固乔剪辑助手”这款软件是你的不二之选。下面就是如何使用这款软件进行批量修改视频尺寸的详细步骤。 1. 首先,你需要在浏览器中进入“固乔科技”的官网,然后下载并安装“…...
四川云汇优想:短视频矩阵运营方案
短视频矩阵运营方案是为了提高短视频平台的用户黏性和活跃度,从而增强用户粘性和平台的商业价值而制定的。下面四川百幕晟小编将对短视频矩阵运营方案进行详细的介绍和分析。 首先,短视频矩阵运营方案要注重用户精细化运营。通过用户画像和兴趣标签&…...
vue中如何获取到当前位置的天气
要在Vue中获取当前位置的天气,您需要使用浏览器的Geolocation API来获取设备的地理位置,并使用第三方的天气API来获取天气数据。 下面是一般的步骤: 在Vue项目中安装axios库,用于发送HTTP请求。 npm install axios 创建一个新的…...
C++三角函数和反三角函数
当涉及到三角函数和反三角函数时,C提供了一组函数来执行这些计算。以下是C中常用的三角函数和反三角函数的详细解释和示例说明: sin函数(正弦函数): 函数原型:double sin(double x);功能:计算给…...
Linux篇 五、Ubuntu与Linux板卡建立NFS服务
Linux系列文章目录 一、香橙派Zero2设置开机连接wifi 二、香橙派Zero2获取Linux SDK源码 三、香橙派Zero2搭建Qt环境 四、Linux修改用户名 文章目录 Linux系列文章目录前言一、连接到局域网互ping测试 二、安装NFS服务配置NFS更新exports配置三、板卡安装NFS客户端四、板卡临时…...
通讯协议学习之路:IrDA协议协议理论
通讯协议之路主要分为两部分,第一部分从理论上面讲解各类协议的通讯原理以及通讯格式,第二部分从具体运用上讲解各类通讯协议的具体应用方法。 后续文章会同时发表在个人博客(jason1016.club)、CSDN;视频会发布在bilibili(UID:399951374) 序、…...
互联网摸鱼日报(2023-10-20)
互联网摸鱼日报(2023-10-20) 博客园新闻 OPPO让折叠机超越直板旗舰成为可能 特斯拉的“大空头”,是马斯克那张嘴 逃避内卷的年轻人,盯上了老年大学的音乐课 理想市值超蔚来1倍,一场属于增程式的胜利 补足折叠屏影像短板,OPPO…...
C/C++ 快速入门
参考:https://blog.csdn.net/gao_zhennan/article/details/128769439 1 下载Visual Studio Code并安装中文插件,此处不再叙述 2 插件安装C/C插件 3 使用快捷键【Ctr ~】打打开终端 验证并未安装编译器 4 我们即将使用【MinGW-64】做为编译器 https:…...
【Git】升级MacOS系统,git命令无法使用
终端执行git命令报错 xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun安装这个东东,?需要42小时 最终解决: 下载安装 https…...
单点登录是什么?
单点登录(Single Sign On, SSO)是指在同一帐号平台下的多个应用系统中,用户只需登录一次,即可访问所有相互信任的应用系统。 单点登录的本质就是在多个应用系统中共享登录状态。如果用户的登录状态是记录在 Session 中的ÿ…...
面向对象设计原则之依赖倒置原则
目录 定义原始定义进一步的理解 作用实现方法代码示例 面向对象设计原则之开-闭原则 面向对象设计原则之里式替换原则 面向对象设计原则之依赖倒置原则 面向对象设计原则之单一职责原则 定义 依赖倒置原则(Dependence Inversion Principle),…...
MATLAB——概率神经网络分类问题程序
欢迎关注“电击小子程高兴的MATLAB小屋” %% 概率神经网络 %% 解决分类问题 clear all; close all; P[1:8]; Tc[2 3 1 2 3 2 1 1]; Tind2vec(Tc) %数据类型的转换 netnewpnn(P,T); Ysim(net,P); Ycvec2ind(Y) %转换回来...
微信小程序的OA会议之首页搭建
目录 一.小程序的布局 1.1. flex是什么 1.2. flex布局 1.3.总体布局 二.轮播图 2.1. 组件 2.2. 数据请求 2.3. 页面 三.首页 2.1. 视图 2.2.数据 2.3. 样式 好啦今天就到这里了,希望能帮到你哦!!! 一.小程序的布局 …...
JS初步了解环境对象this
什么是环境对象? 环境对象:指的是函数内部特殊的变量this,它代表着当前函数运行时所处的环境 作用:弄清楚this的指向,可以让我们代码更简洁 在普通函数中: // 每个函数里面都有this 普通函数的this指向wind…...
Unbuntu-18-network-issue
第六步:容器管理 查看zfs储存卷的占用情况zpool list 为容器修改参数配置 我们不想每个人使用全部的硬件资源,所以还需要限制每个人的参数容器参数配置说明配置容器参数lxc config edit YourContainerName 配置默认容器参数(新容器的参数会…...
<6>-MySQL表的增删查改
目录 一,create(创建表) 二,retrieve(查询表) 1,select列 2,where条件 三,update(更新表) 四,delete(删除表…...
镜像里切换为普通用户
如果你登录远程虚拟机默认就是 root 用户,但你不希望用 root 权限运行 ns-3(这是对的,ns3 工具会拒绝 root),你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案:创建非 roo…...
BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践
6月5日,2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席,并作《智能体在安全领域的应用实践》主题演讲,分享了在智能体在安全领域的突破性实践。他指出,百度通过将安全能力…...
AI编程--插件对比分析:CodeRider、GitHub Copilot及其他
AI编程插件对比分析:CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展,AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者,分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...
3403. 从盒子中找出字典序最大的字符串 I
3403. 从盒子中找出字典序最大的字符串 I 题目链接:3403. 从盒子中找出字典序最大的字符串 I 代码如下: class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...
虚拟电厂发展三大趋势:市场化、技术主导、车网互联
市场化:从政策驱动到多元盈利 政策全面赋能 2025年4月,国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》,首次明确虚拟电厂为“独立市场主体”,提出硬性目标:2027年全国调节能力≥2000万千瓦࿰…...
在树莓派上添加音频输入设备的几种方法
在树莓派上添加音频输入设备可以通过以下步骤完成,具体方法取决于设备类型(如USB麦克风、3.5mm接口麦克风或HDMI音频输入)。以下是详细指南: 1. 连接音频输入设备 USB麦克风/声卡:直接插入树莓派的USB接口。3.5mm麦克…...
通过MicroSip配置自己的freeswitch服务器进行调试记录
之前用docker安装的freeswitch的,启动是正常的, 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...
Visual Studio Code 扩展
Visual Studio Code 扩展 change-case 大小写转换EmmyLua for VSCode 调试插件Bookmarks 书签 change-case 大小写转换 https://marketplace.visualstudio.com/items?itemNamewmaurer.change-case 选中单词后,命令 changeCase.commands 可预览转换效果 EmmyLua…...
Linux-进程间的通信
1、IPC: Inter Process Communication(进程间通信): 由于每个进程在操作系统中有独立的地址空间,它们不能像线程那样直接访问彼此的内存,所以必须通过某种方式进行通信。 常见的 IPC 方式包括&#…...
