草庐IT

【vite+vue3.2 项目性能优化实战】使用vite-plugin-cdn-import进行CDN加速优化项目体积

CDN(ContentDeliveryNetwork)即内容分发网络,是一种通过在全球范围内分布式部署服务器来加速网络内容传输的技术。CDN加速的原理是,当用户请求访问某个资源时,CDN会根据用户的地理位置和网络状况,自动选择离用户最近的服务器来响应请求。如果该服务器上已经缓存了该资源,CDN会直接将缓存的资源返回给用户,从而减少了网络传输的时间和带宽消耗。vite-plugin-cdn-import是一个Vite插件,它可以帮助我们在项目中引入CDN资源,从而提高项目的加载速度和性能。使用该插件,我们可以将一些常用的第三方库(如jQuery、Vue、React等)从本地文件中引入改为从CDN

对vite的简单了解

一.什么是构建工具浏览器只认识html,css,js。构建工具做了那些:1.模块化开发支持:支持直接从node_modules里引入代码+多种模块化支持2.处理代码兼容性:比如Babel语法降级,less,ts语法转换(不是构建工具做,构建工具将这些语法对应的处理工具集成进来自动化处理)3.提高项目性能:压缩文件,代码分割4.优化开发体验:构建工具会自动监听文件的变化,当文件变化以后自动帮你调用对应的集成工具进行重新打包,然后再次浏览器重新运行(整个过程叫做热更新,hot)开发服务器:跨域的问题,用vue-clireact-cli解决跨域的问题(dev代理)总结:构建工具让我们可以不用每次关心

vite项目修改依赖不更新,清除依赖缓存

有些时候我们会直接修改依赖文件,但修改后没有更新,大多数情况下就是被缓存了解决方法1、手动删除node_modules/.viteVite会将预构建的依赖缓存到node_modules/.vite;然后手动删除即可2、强制vite重新构建依赖用--force命令行选项启动开发服务器“scripts”:{“dev”:“vite--force”},vite的缓存只会在以下情况发生时重新构建package.json中的dependencies列表包管理器的lockfile,例如package-lock.json,yarn.lock,或者pnpm-lock.yaml可能在vite.config.js相

【vue3】使用vite构建vue3项目

==>😉博主:初映CY的前说(前端领域),📒本文核心:使用vite构建vue3项目【前言】当我们选择了vue3作为我们项目的开发,就更加的推荐使用vite来对我们的项目进行打包。很简单——这也是开发vue的团队开发的工具,因此支持性肯定比传统的打包工具好,下面我们就来使用vite来开发一个vue3项目。目录一、vite介绍二、vite对比webpack三、使用vite构建项目1.运行创建项目命令2.输入项目名称,默认是vite-project3.选择前端框架4.选择项目类型5.创建完毕6.相关插件安装7.编写Vue应用一、vite介绍Vite(法语意为“快速的”,发音/vit/,发音同“vee

Vite + Vue3 项目中,使用 vw/vh 适配移动端,并通过 Android Studio 打包

目录1.使用vw/vh适配移动端1.1使用vite初始化项目1.2安装插件,将px转化成vw1.2.1在vite.config.ts中,声明插件1.2.2手写postcss类型声明文件,解决 路径爆红、没有提示1.2.3tsconfig.config.jsonVStsconfig.json2.将vue项目丢到Androidapp中2.1创建Androidapp2.2Androidapp目录结构2.3 创建并启动虚拟机2.4修改布局activity_main.xml2.5修改主任务逻辑MainActivity2.6解决运行时网络连接失败的问题2.7打包项目(debug包) 1.使用vw/vh适配

vue3+ts+vite 搭建uniapp项目(微信小程序)

模板下载:uniapp官网通过vue-cli命令行创建uniapp,参考uni-app官网,使用 npxdegitdcloudio/uni-preset-vue#vite-tsmy-vue3-project下载模板;安装css预处理sass:项目终端输入:yarnaddnode-sass@^4.0.0sass-loader@^10.0.1sass(模板没有默认安装sass,如果不安装直接使用会报错) 安装uni-ui组件库,配置easycom模式无引入使用项目终端输入:yarnadd@dcloudio/uni-uisrc/package.json文件配置easycom模式(组件无需import

Vite 是怎么兼容老旧浏览器的?你以为仅仅依靠 Babel?

作者:京东科技孙凯一、前言对前端开发者来说,Vite应该不算陌生了,它是一款基于nobundle和bundleless思想诞生的前端开发与构建工具,官网对它的概括和期待只有一句话:“下一代的前端工具链”。Vite最早的版本由尤雨溪发布于3年前,经历了3年多的发展,Vite也已逐渐迭代成熟,它的稳定性、扩展性、周边生态足以在生产环境中支撑各种业务场景的落地。但是关于Vite的优劣势分析我们就戛然而止,不在深入展开了,这不是本文的重点。本文的重点在于探究Vite如何实现兼容低版本浏览器,这一切还得从那个阳光明媚的午后说起。二、那个午后本着尝鲜的态度,我在某一个项目中用了Vite,当时还是3.x.x

vue3 setup + ts + vite 项目问题解决:Cannot find module ... or its corresponding type declarations.(ts2307)

昨日我尝试使用vue3setup+ts+vite进行vue3项目的实现,遇到此问题:Cannotfindmodule...oritscorrespondingtypedeclarations.(ts2307)文件报错类型以及ts官方错误说明:这里以别名"@"为例子://.vue文件importLoginApifrom'@/apis/loginApi';//(ts2307)import{getDate}from'@/utils/date';//(ts2307)//.ts文件importLoginApifrom'@/apis/loginApi';//(ts2307)2307错误Cannotfind

一篇文章教小白学会搭建 vite + ts + vue3 项目,手把手教程,不会算我输

目录一、基础环境和工具1.使用pnpm代替npm2.使用pinia代替vuex3.使用windicss4.使用vscode5.使用sourcetree6.了解vite+ts+vue二、项目搭建1.流程图2.初始化项目2.1使用命令初始化项目2.2项目结构3.使用git3.1创建本地的git仓库3.2新建远端gitee仓库3.3本地仓库绑定到git远端仓库4.增加.nvmrc5.增加工程化插件5.1使用scss 5.2使用autoprefiexer5.3使用windicss5.4使用antd5.5使用pinia5.6使用vue-router 5.7设置路径别名5.8使用polyfill 5.9使

Svelte-Ui-Admin基于svelte-ui中后台管理系统|Svelte3+Vite3后台框架

SvelteUiAdmin基于svelte3.x+svelteKit+svelteUI整合的中后台管理系统。一款基于svelte3.x+vite3+svelteKit+svelteUi+svelte-i18n等技术开发的高颜值中后台管理系统SvelteUiAdmin。包含了常用的表格/表单/编辑器/列表/权限控制/弹窗消息提示等解决方案。 技术栈框架技术:svelte3.x+svelteKit+vite3UI组件库:svelte-ui(基于svelte自定义pc端UI组件库)样式处理:sass^1.54.4图表组件:echarts^5.3.3编辑器组件:wangeditor^4.7.15国际化