不同格式的文件配置也不一样,具体可以参考 github :vite-plugin-imagemin。 构建分析 分析依赖模块的大小占比,可以让我们更有针对性的进行体积优化。我们通常使用 rollup-plugin-visualizer 插件进行构建分析,方法也比较简单: npm install rollup-plugin-visualizer -D // vite.config.js import { defineConfig } fro...
1、使用rollup-plugin-visualizer 可视化分析包 npm i rollup-plugin-visualizer -S 在vite.config.js中引入 在plugins里面 然后执行npm run build就自动打开可视化分析 2、 CDN加速 在vite.config.js中引入 import { autoComplete, Plugin as importToCDN } from "vite-plugin-cdn-import"; 3、开启Gzip压缩 npm ...
这里也需要安装一个插件, 一开始我以为是 rollup-plugin-gzip 后面发现不对,vite 自己做了一个插件出来。vite-plugin-compression 使用方式很简单 import viteCompression from 'vite-plugin-compression';plugins: [viteCompression()], 效果如下: nginx 配置 没错,这里nginx 也要配置, 配置启动gzip模块, 然后优先使...
本人项目是使用vite来进行构建的 这里也需要安装一个插件, 一开始我以为是rollup-plugin-gzip后面发现不对,vite 自己做了一个插件出来。vite-plugin-compression使用方式很简单 import viteCompression from 'vite-plugin-compression'; plugins: [ viteCompression() ], 效果如下: nginx 配置 没错,这里nginx也要配置,...
Vue3 会默认使用 Rollup 进行treeshaking,不需要额外进行配置。但有一个条件,必须是ES6 module模块才行。还是上面那个例子: 复制 // src/main.jsimport{cloneDeep}from'lodash'constobj=cloneDeep({}) 1. 2. 3. 4. 由于lodash 是使用CommonJS规范的模块,所以无法进行treeshaking,Vue 会把整个lodash依赖打包进来...
npm install vite-plugin-compression -D // build.rollupOptions.plugins[]viteCompression({verbose:true,// 是否在控制台中输出压缩结果disable:false,threshold:10240,// 如果体积大于阈值,将被压缩,单位为b,体积过小时请不要压缩,以免适得其反algorithm:'gzip',// 压缩算法,可选['gzip',' brotliccompress ...
3、gzip静态资源压缩 3.1客户端开启: npm i vite-plugin-compression -D//引入importviteCompressionfrom'vite-plugin-compression'//在plugins配置数组里添加gzip插件plugins: [viteCompression({verbose:true,disable:false,threshold:10240,algorithm:'gzip',ext:'.gz', ...
rollup-plugin-visualizer是一个用于Rollup构建工具的插件,它可以生成可视化的构建报告,帮助开发者更好地了解构建过程中的文件大小、依赖关系等信息。 使用rollup-plugin-visualizer插件,可以在构建完成后生成一个交互式的HTML报告,其中包含了构建过程中的各种统计信息,如文件大小、依赖关系、模块数量等。它提供了多种模式的...
优化静态资源的打包处理,按分类存放相应的文件,可以提高缓存效率。在Vite中,可以通过配置“build.rollupOptions.output”来实现: build:{rollupOptions:{output:{//控制动态导入的 chunk 文件的命名方式。chunkFileNames:'static/js/[name]-[hash].js',//控制入口文件的命名方式。entryFileNames:'static/js/[name...
一:下载插件 npm install --save-dev rollup-plugin-visualizer 二: 在vite.config.js中配置 export default defineConfig({plugins: [ vue(), visualizer({open:true,//注意这里要设置为true,否则无效gzipSize:true,brotliSize:true})],}) 三:使用命令打包,自动生成体积分析图...