rollup-plugin-visualizer是一个用于Rollup构建工具的插件,它可以生成可视化的构建报告,帮助开发者更好地了解构建过程中的文件大小、依赖关系等信息。 使用rollup-plugin-visualizer插件,可以在构建完成后生成一个交互式的HTML报告,其中包含了构建过程中的各种统计信息,如文件大小、依赖关系、模块数量等。它提供了多种模式的...
装包 yarn add rollup-plugin-visualizer 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' // ht...
"rollup-plugin-copy": "^3.4.0", "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": ...
配置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: { rollupOptions: { plugins: [visualizer()] }, } }...
"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.
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"; ...
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' ...
rollup-plugin-visualizer 可视化并分析构建包,查看哪些模块占用空间大小,以此来优化构建包的大小。这是一个 Rollup 的 plugin,推荐这个也是 vite 的一个特性,vite 默认已经支持大部分的 Rollup 的 plugin,从这点来看,vite 的 plugin 库更加丰富了。 安装及使用 npm i -D rollup-plugin-visualizer // vite.config...
import{visualizer}from'rollup-plugin-visualizer';exportdefaultdefineConfig({plugins:[vue(),vueJsx(),visualizer()],}); 在执行npm run build命令后,项目就把项目代码打包在根目录的 dist 目录下,并且根目录下多了一个文件 stat.html, 可以看到代码体积图。根据对代码体积分析,确定是否需要用懒加载和按需加载...
import { visualizer } from 'rollup-plugin-visualizer' export default defineConfig({ plugins: [visualizer()] }) 打包后,会在根目录下生成一个 stats.html文件,用浏览器打开后,如下图: vite-plugin-restart 通过监听文件修改,自动重启 vite 服务