vite-plugin-compression 是一个基于 Vite 的插件,用于 gzip 或 Brotli 压缩你的资源,从而减少页面的加载时间和网络带宽,提高用户访问速度和体验。 安装: pnpmaddvite-plugin-compression -D 使用: importviteCompressionfrom"vite-plugin-compression";exportdefault() => {return{plugins: [viteCompression()],};};...
最常用的场景就是监听 vite.config.js 和 .env.development 文件,修改 vite配置文件和环境配置文件,是需要重启 vite 才会生效,通过这个插件,在修改上述两个文件则不需要重新运行 安装 npm i vite-plugin-restart -D 配置:vite.config.js import ViteRestart from 'vite-plugin-restart' export default { plugins:...
在这个配置中,我们使用file-loader处理图片文件,然后使用image-webpack-loader插件对图片进行压缩和优化处理,其中 options 可以设置不同的压缩算法和参数。 Vite 压缩图片 在Vite 中常用的图片压缩插件有imagemin和squoosh,下面以squoosh为例: 安装vite-plugin-squoosh npm install vite-plugin-squoosh -D 配置vite-plugin...
一种常用的压缩WebP格式的插件是imagemin-webp,它可以帮助你在构建过程中自动压缩WebP格式的图片。 首先,你需要安装imagemin-webp插件,可以通过npm来进行安装: bash. npm install imagemin-webp --save-dev. 安装完成后,你需要在Vite的配置文件中(通常是vite.config.js)引入并配置imagemin-webp插件。以下是一个简单...
每次引入一张SVG图片都需要写一次相对路径,并且对SVG图片进行压缩优化也不够方便。 vite-svg-loader插件加载SVG文件作为Vue组件,使用SVGO进行优化。 插件网站https://www.npmjs.com/package/vite-svg-loader 1. 安装 pnpm i vite-svg-loader-D 1.
// 开启.gz压缩 rollup-plugin-gzip vitePlugins.push(ConfigCompressPlugin()); // 监听配置文件改动重启 vitePlugins.push(ConfigRestartPlugin()); // 构建时显示进度条 vitePlugins.push(ConfigProgressPlugin()); // windCSS vitePlugins.push(windiCSS()); // vite-plugin-svg-icons vitePlugins.push(Con...
使用vite-plugin-imagemin进行图片压缩。每次打包都会压缩一次,会占用构建耗时,有值得优化的空间,此处先不作讨论 @vitejs/plugin-legacyvite默认对浏览器支持的基线是支持ESM的现代浏览器,这个插件就是用来兼容不支持ESM的浏览器,详见这里 本文涉及到的配置文件和脚本都放在我的仓库了:https://github.com/Rockergmail/...
安装插件 rollup-plugin-visualizer 它是一个打包体积分析插件,对应webpack中的webpack-bundle-analyzer,可以看到打包后的所有文件大小 rollupOptions 对象允许配置 Rollup 的大多数核心选项,常见的有: input - 输入文件地址 output - 输出配置 strict //确保所有导出的模块使用严格模式 intro: '/* my-lib version 1....
打包性能优化1. HTML处理 vite-plugin-html插件用于将传统HTML文件作为输出文件，是专门为Vite构建优化的工具，不依赖于webpack。安装与使用方法请查阅文档。图片压缩2. 图片优化 vite-plugin-image-optimizer自动优化应用程序中的图片，减少加载时间和带宽使用，提高用户体验。安装和使用指南可在插件文档中找到...