vite性能优化一、分包策略配置Rollup实现二、gzip压缩配置插件实现三、cdn加速配置插件实现一、分包策略1）浏览器的缓存策略：访问网站时向服务器获取静态资源并缓存起来，如css、js等下次再访问时，如果之前保存的“静态资源”名字没有改变，则不会重新请求2）vite打包文件生成策略：打包时只要代码内容变了，就会生成hash字符完全不同的新文件3）vite分包策略：我们的业务代码时常改变，而依赖不会变化所以把依赖分开打包，以避免多次重新请求资源配置Rollup实现在vite的配置文件中添加“build.rollupOptions.output.manualChunks”配置项实现，如：/
🌻前言本文教程github地址、码云。如果对你有帮助，希望能点个star⭐️⭐️⭐️万分感谢😊😊😊🧱背景不久前我司需要重新部署一个前端项目，由我来负责这个项目的搭建。因为这个项目是需要和app混合开发的h5页面，包括以后可能会做一些运营h5，所以自然不能采用常规的SPA单页面应用架构（因为大部分页面耦合度低，全都塞一个项目里的话，即使打开个纯静态页都要跑起来整个项目，严重影响页面的加载速度）.另外，我们其实已经有混合开发h5项目，采用的gulp工作流，即每个页面都是单独的一个html文件。这种架构的优势很明显，就是体量小，结构清晰等，但是它的缺点也非常明显，例如有些轮子无法使用，组件化、模块化
前端ffmpeg实现视频剪切功能概述环境准备1、安装ffmpeg2、引入并初始化3、引入并初始化功能片段上传文件视轨剪切完整代码剪切组件父组件功能概述组件可传入视频的起止时间,截取起止时间,视频地址和视轨所需参数,在视轨通过滑动鼠标选择被截取的部分,参数以及回调说明如下:参数描述参数名描述startTime视频开始时间，精确到毫秒endTime视频结束时间，精确到毫秒spliterStartTime视频截取开始时间spliterEndTime视频截取结束时间url视频地址ffVideo视轨所需参数回调描述方法名描述回调形参参数描述queryTime截取时间段Array[开始时间，结束时间]su
前端ffmpeg实现视频剪切功能概述环境准备1、安装ffmpeg2、引入并初始化3、引入并初始化功能片段上传文件视轨剪切完整代码剪切组件父组件功能概述组件可传入视频的起止时间,截取起止时间,视频地址和视轨所需参数,在视轨通过滑动鼠标选择被截取的部分,参数以及回调说明如下:参数描述参数名描述startTime视频开始时间，精确到毫秒endTime视频结束时间，精确到毫秒spliterStartTime视频截取开始时间spliterEndTime视频截取结束时间url视频地址ffVideo视轨所需参数回调描述方法名描述回调形参参数描述queryTime截取时间段Array[开始时间，结束时间]su
问题提出最近在做一个练习的小项目，由于要配合组成员的其它成员来搭建项目，大多掌握的技术栈都在vue2，用惯了vite来搭建（vite真香~）,就想着来搭建一个vue2的项目。原本以为查下百度很快可以搭好，没想到折腾了一早上。。。。⭐️文章结尾会给出我的package.json文件搭建过程1、初始化项目vite提供了对应的npm命令可以创建各种框架的项目，但是vite在创建vue项目时，默认直接创建vue3，因此这里我们使用原生项目进行创建1.1创建项目注意：这里vite的版本采用2.8.0的,最新的版本创建后续会出现问题npminitvite@2.8.0后续，安装如图创建好项目后//1.进入项
在使用vite进行项目打包时，默认已经帮我们做了一些优化工作，比如代码的压缩，分包等等。除此之外，我们还有一些可选的优化策略，比如使用CDN，开启Gzip压缩等。本文会介绍在vite中使用插件来开启Gzip压缩。GzipGzip是一种压缩算法，在网络传输中使用非常普遍。随便打开一个网页，都使用了gzip压缩：需要注意的是，Gzip压缩仅对于文本类型的资源有明显提示，压缩后的体积大约是压缩前的1/3。对于图片，音视频等媒体资源，本身就采用了有损压缩，所以再使用gzip并不能得到很大提升，有时候反而会适得其反。开启Gzip前端项目打包出的js，css资源，非常适合使用gzip进行压缩。这样，用户浏
在使用vite进行项目打包时，默认已经帮我们做了一些优化工作，比如代码的压缩，分包等等。除此之外，我们还有一些可选的优化策略，比如使用CDN，开启Gzip压缩等。本文会介绍在vite中使用插件来开启Gzip压缩。GzipGzip是一种压缩算法，在网络传输中使用非常普遍。随便打开一个网页，都使用了gzip压缩：需要注意的是，Gzip压缩仅对于文本类型的资源有明显提示，压缩后的体积大约是压缩前的1/3。对于图片，音视频等媒体资源，本身就采用了有损压缩，所以再使用gzip并不能得到很大提升，有时候反而会适得其反。开启Gzip前端项目打包出的js，css资源，非常适合使用gzip进行压缩。这样，用户浏
这篇文章应该说是《安装包UI美化之路-nsNiuniuSkin安装包制作可视化配置向导》的延伸与进一步应用，在可视配置的基础之上，生成供electron-builder打包的脚本！一直有朋友反馈，不知道如何将nsNiuniuSkin与Electron打包结合起来；我综合整理了一下，大家的担心无外乎以下几点：如何将elecron-builder的打包流程与nsNiuniuSkin的打包流程整合起来，形成一个统一的流程？nsNiuniuSkin打包出来的安装包，如何与electron-updater的升级流程对接上？使用nsNiuniuSkin打包出来的安装包，如何与之前electron-buil
不知道有没有这样的兄弟，学习Vite的时候，官网上各种配置看的是眼花缭乱。不知道哪些需要掌握，哪些只用简单了解一下。为了提高大家的效率，我把项目中常用的配置梳理了一下分享给大家，希望对你上手Vite有所帮助。话不多说，开干！css.preprocessorOptions传递给CSS预处理器的配置选项，这些配置会传递到预处理器的执行参数中去。例如，在scss中定义一个全局变量：//vite.config.jsimport{defineConfig}from'vite'//使用defineConfig工具函数获取类型提示：exportdefaultdefineConfig({css:{prepro
不知道有没有这样的兄弟，学习Vite的时候，官网上各种配置看的是眼花缭乱。不知道哪些需要掌握，哪些只用简单了解一下。为了提高大家的效率，我把项目中常用的配置梳理了一下分享给大家，希望对你上手Vite有所帮助。话不多说，开干！css.preprocessorOptions传递给CSS预处理器的配置选项，这些配置会传递到预处理器的执行参数中去。例如，在scss中定义一个全局变量：//vite.config.jsimport{defineConfig}from'vite'//使用defineConfig工具函数获取类型提示：exportdefaultdefineConfig({css:{prepro
