webpack中我可以使用 webpack-bundle-analyzer进行打包分析，目前 vite2.x 是基于 rollup 打包的，我们可以使用install rollup-plugin-visualizer。
npm install rollup-plugin-visualizer -D
// vite.config.js
import { defineConfig } from 'vite'
import { visualizer } from 'rollup-plugin-visualizer';
export default defineConfig({
plugins: [
// 将 visualizer 插件放到最后
visualizer()
]
})
执行：npm run build ，构建成功之后会在根目录下生成一个 stats.html ，打开页面即可以看到分析结果。我们还可以通过左上角的 排除、包含 输入框对依赖模块进行筛选。同时鼠标移入各模块，可以看到详细的分析数据：
image.png
使用vite-plugin-svg-icons插件 vite.config.ts 中的配置插件 在 src/mai...
搭建第一个 Vite 项目 yarn 安装 cesium 安装 vite 插件 配置 vite.config.js...
通过 vite-plugin-svg-icons 插件封装SvgIcon组件 配置 vite.config.ts ...
vite整合了rollup，所以vite的插件可以看成是受限制的rollup插件，它支持部分rollup的Hook...
Vite 官网 https://vitejs.cn/[https://vitejs.cn/] 基于Vite插件ht...
vite 下载入 svg 图标 安装插件：vite-plugin-svg-icons：https://www.np...
vite vite 是神马？ Vite (法语意为 "快速的"，发音 /vit/) 是一种新型前端构建工具，能够显...
一、使用通用构建工具 Vite Vite 本身就是一个构建工具，开发环境下不打包，生成环境使用 Rollup 进行...
在 vite 项目中使用 Vant 时，推荐安装 vite-plugin-style-import 插件，它可以自...
title: vite+ts+vue3项目构建date: 2022-06-09description: vite+...
本文标题：Vite 构建分析插件 rollup-plugin-visual
本文链接：https://www.haomeiwen.com/subject/bzkukdtx.html
网友评论