vite.config.ts import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { visualizer } from "rollup-plugin-visualizer"; import VueDevTools from 'vite-plugin-vue-devtools' // https://vitejs.dev/config/ export defaul...
"rollup-plugin-peer-deps-external": "^2.2.4", "rollup-plugin-postcss": "^4.0.2", "rollup-plugin-scss": "^4.0.0", "rollup-plugin-terser": "^7.0.2", "rollup-plugin-typescript2": "^0.34.1", "rollup-plugin-visualizer": "^5.9.0", "sass": "^1.62.0", "sass-loader": "^10.4...
在vue3+vite项目中,一个常用的包分析插件是rollup-plugin-visualizer。这个插件可以生成一个可视化的报告,展示打包后的文件大小、依赖关系等信息。 2. 选择适合的包分析插件 经过调研,我们选择rollup-plugin-visualizer作为我们的包分析插件。这个插件与vite的底层打包工具rollup兼容,因此非常适合在vue3+vite项目中使用。
npm install rollup-plugin-visualizer 配置vite.config.ts:import{ visualizer }from'rollup-plugin-visualizer' exportdefaultdefineConfig({ plugins: [ visualizer({ open:true}) ] }) 五、企业级开发建议 1. 设计系统落地 在tailwind.config.js中定义品牌色、间距系统 使用@layer components封装业务组件样式 ...
配置vite.config.js 文件 【加入插件】 import { defineConfig }from'vite'import vuefrom'@vitejs/plugin-vue'import { visualizer }from'rollup-plugin-visualizer'//https://vitejs.dev/config/exportdefaultdefineConfig({ plugins: [vue()], build: { ...
由于我们使用的是vite vite打包是基于rollup 的我们可以使用 rollup 的插件 npm install rollup-plugin-visualizer vite.config.ts 配置 记得设置open 不然无效 import { visualizer } from 'rollup-plugin-visualizer';plugins: [vue(), vueJsx(),visualizer({ open:true })], ...
import vue from '@vitejs/plugin-vue' import vueJsx from '@vitejs/plugin-vue-jsx' import vueDevTools from 'vite-plugin-vue-devtools' import { visualizer } from 'rollup-plugin-visualizer' import externalGlobals from 'rollup-plugin-external-globals' ...
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"; ...
由于我们使用的是vite vite打包是基于rollup 的我们可以使用 rollup 的插件 npm install rollup-plugin-visualizer vite.config.ts 配置 记得设置open 不然无效 import { visualizer } from 'rollup-plugin-visualizer'; plugins: [vue(), vueJsx(),visualizer({ open:true })], 然后进行npm run build打包 我在...
问题:打包之后发现文件还是很大,也没有优化的方向,在webpack时代是默认配置了分析报告,只要增加--report在命令行就可以,但是在vite上默认是没有配置的。 解决方法: 1.安装rollup-plugin-visualizer进行打包分析 npm i rollup-plugin-visualizer-D 2.修改vite.config.ts配置文件如下: ...