官方地址:github.com/btd/rollup-… 一、安装rollup-plugin-visualizer 首先随意找一个你想加速的项目,进入终端: npm安装:npm install --save-dev rollup-plugin-visualizeryarn安装:yarn add --dev rollup-plugin-visualizer 然后配置vite.config.ts中的插件如下,具体来说首先引入模块,然后找到plugins模块,在其中加入...
打包完成后,rollup-plugin-visualizer 会生成一个 HTML 文件(默认是 stats.html),你可以打开这个文件来查看可视化报告。报告中会展示各个模块的大小、依赖关系等信息,帮助你优化打包结果。 如果在安装或配置过程中遇到任何问题,可以参考 CSDN博客 上的相关文章或搜索具体的错误信息来寻求解决方案。 text...
"rollup-plugin-visualizer":"^5.9.2", "sass":"^1.68.0", "sass-loader":"^13.3.2", "taze":"^0.11.2", Expand Down 254 changes: 242 additions & 12 deletions254pnpm-lock.yaml Load diff Large diffs are not rendered by default.
"@vue/tsconfig":"^0.1.3", 7171 "eslint":"^8.2.0", 7272 "eslint-config-airbnb":"^19.0.0", 73+ "rollup-plugin-visualizer":"^5.12.0", 7374 "sass":"^1.63.2", 7475 "sass-loader":"^10.4.1", 7576 "typescript":"^4.9.4", ...
import babel from "@rollup/plugin-babel"; import resolve from "@rollup/plugin-node-resolve"; import ts from "rollup-plugin-typescript2"; import vue from "@vitejs/plugin-vue"; import jsx from "@vitejs/plugin-vue-jsx"; import json from "@rollup/plugin-json"; ...
@rollup/plugin-babel:在 Rollup 中使用 Babel 进行 JS 代码的语法转译。 @rollup/plugin-typescript: 支持使用TypeScript开发。 @rollup/plugin-alias:支持别名配置。 @rollup/plugin-replace:在 Rollup 进行变量字符串的替换。 rollup-plugin-visualizer: 对 Rollup 打包产物进行分析,自动生成产物体积可视化分析图。
import vue from '@vitejs/plugin-vue' import { visualizer } from "rollup-plugin-visualizer"; import VueDevTools from 'vite-plugin-vue-devtools' // https://vitejs.dev/config/ export default defineConfig({ server: { port: 3003 },
配置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: { ...
plugins: [visualizer()] }) 打包后,会在根目录下生成一个 stats.html文件,用浏览器打开后,如下图: vite-plugin-restart 通过监听文件修改,自动重启 vite 服务 最常用的场景就是监听 vite.config.js 和 .env.development 文件,修改 vite 配置文件和环境配置文件,是需要重启 vite 才会生效,通过这个插件,在修改...
Vite:rollup-plugin-visualizer查看打包体积分析report报告 安装依赖 pnpm i rollup-plugin-visualizer -D 1. 配置 vite.config.ts import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { visualizer } from 'rollup-plugin-visualizer'...