前端工程化回顾-vite 构建神器

1.构建vite 项目

pnpm create vite
2.常用的配置:
1.公共资源路径配置:
 base: './',  默认是/
2.路径别名配置:
 resolve: {alias: {'@': path.resolve(__dirname, './src'),'ass': path.resolve(__dirname, './src/assets'),'comp': path.resolve(__dirname, './src/components')}},import WXl from "comp/HelloWorld.vue";import test from "@/components/HelloWorld.vue";import logo from "ass/logo.png";
3.文件省略后缀配置:
 extensions: ['.js', '.vue', '.json'] //引入对应的文件时可以忽略其后缀

4.生产环境log去除:

1.terser
 build: {minify: 'terser',terserOptions: {compress: {drop_console: true,drop_debugger: true}}}
2.vite-plugin-remove-console
pnpm i vite-plugin-remove-console -Dimport removeConsole from 'vite-plugin-remove-console';
plugins: [vue(), removeConsole()),

5.图片压缩 viteImagemin

import viteImagemin from 'vite-plugin-imagemin'viteImagemin({gifsicle: {optimizationLevel: 7,interlaced: false},optipng: {optimizationLevel: 7},mozjpeg: {quality: 20},pngquant: {quality: [0.8, 0.9],speed: 4},svgo: {plugins: [{name: 'removeViewBox'},{name: 'removeEmptyAttrs',active: false}]}})

见下图效果
在这里插入图片描述

6、打包优化查看工具 rollup-plugin-visualizer

import { visualizer } from 'rollup-plugin-visualizer';
plugins: [vue(), removeConsole(), visualizer({ open: true }),

在这里插入图片描述

7.cdn优化打包提交

1.上一步6可以看出elemetuiplus 占用大量包体积

1.vite-plugin-cdn-import

下面vue等引用cdn资源

import importToCDN from 'vite-plugin-cdn-import'importToCDN({modules: [{name: "vue",var: "Vue",path: "https://unpkg.com/vue@3.2.31"},{name: "element-plus",var: "ElementPlus",path: "https://unpkg.com/element-plus@2.1.9",css: "https://unpkg.com/element-plus/dist/index.css"}]},),

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

完整配置文件如下:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'import removeConsole from 'vite-plugin-remove-console';import { visualizer } from 'rollup-plugin-visualizer';import viteImagemin from 'vite-plugin-imagemin'import importToCDN from 'vite-plugin-cdn-import'import viteCompression from 'vite-plugin-compression'
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(), removeConsole(), visualizer({ open: true }),importToCDN({modules: [{name: "vue",var: "Vue",path: "https://unpkg.com/vue@3.2.31"},{name: "element-plus",var: "ElementPlus",path: "https://unpkg.com/element-plus@2.1.9",css: "https://unpkg.com/element-plus/dist/index.css"}]},),viteCompression({threshold: 1024 // 对大于 1mb 的文件进行压缩}),viteImagemin({gifsicle: {optimizationLevel: 7,interlaced: false},optipng: {optimizationLevel: 7},mozjpeg: {quality: 20},pngquant: {quality: [0.8, 0.9],speed: 4},svgo: {plugins: [{name: 'removeViewBox'},{name: 'removeEmptyAttrs',active: false}]}})],base: './',server: {host: '0.0.0.0',port: 8888,proxy: {}},resolve: {alias: {'@': path.resolve(__dirname, './src'),'ass': path.resolve(__dirname, './src/assets'),'comp': path.resolve(__dirname, './src/components')}},extensions: ['.js', '.vue', '.json'] // 引入对应的文件时可以忽略其后缀// build: {//   minify: 'terser',//   terserOptions: {//     compress: {//       drop_console: true,//       drop_debugger: true//     }//   }// }})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/594605.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

uni-app中实现元素拖动

uni-app中实现元素拖动 1、代码示例 <template><movable-area class"music-layout"><movable-view class"img-layout" :x"x" :y"y" direction"all"><img :src"musicDetail.bgUrl" :class&…

springboot+redisTemplate多库操作

单库操作 我做了依赖管理&#xff0c;所以就不写版本号了添加依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency>配置文件 spring:redis:database: 2…

勒索检测能力升级,亚信安全发布《勒索家族和勒索事件监控报告》

评论员简评 近期(12.08-12.14)共发生勒索事件119起&#xff0c;相较之前呈现持平趋势。 与上周相比&#xff0c;本周仍然流行的勒索家族为lockbit3和8base。在涉及的勒索家族中&#xff0c;活跃程度Top5的勒索家族分别是&#xff1a;lockbit3、siegedsec、dragonforce、8base和…

MatrixOne 1.1.0 Release

我们非常高兴地宣布&#xff1a; MatrixOne内核1.1.0版本 正式发布啦&#xff01; 项目文档网站 https://docs.matrixorigin.cn MatrixOne是一款分布式超融合异构数据库&#xff0c;MatrixOne旨在提供一个云原生、高性能、高弹性、高度兼容MySQL的HSTAP数据库&#xff0c;让…

Oracle database 12cRAC异地恢复至单机

环境 rac 环境 byoradbrac Oracle12.1.0.2 系统版本&#xff1a;Red Hat Enterprise Linux Server release 6.5 软件版本&#xff1a;Oracle Database 12c Enterprise Edition Release 12.1.0.2.0 - 64bit byoradb1&#xff1a;172.17.38.44 byoradb2&#xff1a;172.17.38.4…

工具篇--Spring-Cloud--feign 通过feign 接口完成文件的下载

文章目录 前言一、feign接口获取文件流程&#xff1a;二、文件获取实现2.1 引入jar&#xff1a;2.2 实现&#xff1a; 总结 前言 通常在spring-boot 项目中&#xff0c;对于文件的下载都是直接调用到对应的服务中&#xff0c;而不是通过feign 接口获取文件&#xff1b;有时我们…

使用 Process Explorer 和 Windbg 排查软件线程堵塞案例分享

目录 1、问题说明 2、线程堵塞的可能原因分析 3、使用Windbg和Process Explorer确定线程中发生了死循环 4、根据Windbg中显示的函数调用堆栈去查看源码&#xff0c;找到问题 4.1、在Windbg定位发生死循环的函数的方法 4.2、在Windbg中查看变量的值去辅助分析 4.3、是循环…

HubSpot电子邮件自动化的关键功能和流程!

HubSpot提供了强大的电子邮件自动化工具&#xff0c;使用户能够创建、执行和跟踪复杂的电子邮件市场营销活动。以下是HubSpot电子邮件自动化的一些关键功能和流程&#xff1a; 1.电子邮件工作流程&#xff08;Email Workflows&#xff09;&#xff1a; 用户可以使用HubSpot的工…

机器学习笔记 - 偏最小二乘回归 (PLSR)

一、偏最小二乘回归:简介 PLS 方法构成了一个非常大的方法族。虽然回归方法可能是最流行的 PLS 技术,但它绝不是唯一的一种。即使在 PLSR 中,也有多种不同的算法可以获得解决方案。PLS 回归主要由斯堪的纳维亚化学计量学家 Svante Wold 和 Harald Martens 在 20 世纪 80 年代…

【零基础入门TypeScript】判断条件和循环

目录 定环 无限循环 示例&#xff1a;while 与 do..while 中断语句 句法 流程图 例子 继续语句 句法 流程图 例子 输出 无限循环 语法&#xff1a;使用 for 循环的无限循环 示例&#xff1a;使用 for 循环的无限循环 语法&#xff1a;使用 while 循环进行无限循…

LeetCode-轮转数组的三种方法(189)

题目描述&#xff1a; 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 思路一&#xff1a; 建立一个两倍原数组长度的数组&#xff0c;然后其中保存两遍原数组中的元素&#xff0c;轮转的过程就可以看成是在这个新数组中截…

云计算:OpenStack 分布式架构管理VXLAN网络(单控制节点与多计算节点)

目录 一、实验 1.环境 2.各节点新增网卡准备VXLAN网络 3.控制节点配置私有网络 4.计算节点1配置私有网络 5.计算节点2配置私有网络 6.重启服务 7.修改Dashboard 8.新建项目&#xff08;租户&#xff09;及用户 9.新建网络与子网 10.新建实例 11.新建路由 12.新增浮…

物联网的网络管理技术开发

物联网并不是新的事物。不论称为物联网或者是传感网&#xff0c;物联网的基本组成可以看成为传感器网络接入互联网构成,当然也有仅仅是传感器网络组成的简单的物联网系统。但是总的来说,物联网有许多新的特点。这些特点导致物联网对于其网络的管理有新的要求。因此电信网和互联…

算法与数据结构之数组(Java)

目录 1、数组的定义 2、线性结构与非线性结构 3、数组的表现形式 3.1 一维数组 3.2 多维数组 4、重要特性&#xff1a;随机访问 5、ArrayList和数组 6、堆内存和栈内存 7、数组的增删查改 7.1 插入数据 7.2 删除一个数据 7.3 修改数组 7.4 查找数据 8、总结 什么…

视频监控可视化云平台EasyCVR智能视频技术优势分析

TSINGSEE青犀视频安防视频管理系统EasyCVR视频智能融合共享平台&#xff0c;是一个支持Windows/Linux(CentOS ubuntu)/国产化系统的视频管理平台。平台可以支持多协议接入&#xff0c;通过视频应用引擎将多种格式的视频数据转换为统一的视频流数据&#xff0c;支持无插件H5直播…

RK3568平台 input输入子系统

一.input子系统简介 Input 子系统是管理输入的子系统&#xff0c; 和 pinctrl 和 gpio 子系统一样&#xff0c; 都是 Linux 内核针对某一类设备而创建的框架。 input 子系统处理输入事务&#xff0c; 任何输入设备的驱动程序都可以通过 input 输入子系统提供的接口注册到内核&…

Java虚拟机介绍

JVM是一种用于计算设备的规范&#xff0c;它是一个虚拟出来的计算机&#xff0c;是通过在实际的计算机上仿真模拟计算机的各个功能来实现的。Java语言的一个非常重要的特点就是与平台的无关性。而使用Java虚拟机是实现这一特点的关键。每个Java虚拟机都着一个清晰的任务&#x…

用通俗易懂的方式讲解大模型:在 CPU 服务器上部署 ChatGLM3-6B 模型

大语言模型&#xff08;LLM&#xff09;的量化技术可以大大降低 LLM 部署所需的计算资源&#xff0c;模型量化后可以将 LLM 的显存使用量降低数倍&#xff0c;甚至可以将 LLM 转换为完全无需显存的模型&#xff0c;这对于 LLM 的推广使用来说是非常有吸引力的。 本文将介绍如何…

Flume基础知识(三):Flume 实战监控端口数据官方案例

1. 监控端口数据官方案例 1&#xff09;案例需求&#xff1a; 使用 Flume 监听一个端口&#xff0c;收集该端口数据&#xff0c;并打印到控制台。 2&#xff09;需求分析&#xff1a; 3&#xff09;实现步骤&#xff1a; &#xff08;1&#xff09;安装 netcat 工具 sudo yum …

SVN服务端的下载、安装

地址 &#xff1a; Apache Subversion Binary Packages 下载 点击 VisualSVN 安装 都是点击 next 点击next &#xff0c;即可安装成功