官方地址:github.com/btd/rollup-… 一、安装rollup-plugin-visualizer 首先随意找一个你想加速的项目,进入终端: npm安装:npm install --save-dev rollup-plugin-visualizeryarn安装:yarn add --dev rollup-plugin-visualizer 然后配置vite.config.ts中的
"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", "eslint":"^8.2.0", "eslint-config-airbnb":"^19.0.0", "rollup-plugin-visualizer":"^5.12.0", "sass":"^1.63.2", "sass-loader":"^10.4.1", "typescript":"^4.9.4", Expand Down 4 changes: 3 additions & 1 deletion4vite.config.ts ...
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-visualizer: 对 Rollup 打包产物进行分析,自动生成产物体积可视化分析图。 JavaScript API 方式调用 以上我们通过Rollup的配置文件结合rollup -c完成了 Rollup 的打包过程,但有些场景下我们需要基于 Rollup 定制一些打包过程,配置文件就不够灵活了,这时候我们需要用到对应 JavaScriptAPI来调用 Rollup,主要分...
配置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: { ...
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"; ...
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'...
使用rollup-plugin-visualizer进行模块分析。 import * as xx from 'lib' 改成命名导入。 静态资源(json文件)提取至public文件夹。 删除app.component(name, component)全局组件注册,会导致全量构建。 build.rollupOptions.output.manualChunks 拆包优化。 优化结果 减少模块体积。 json文件不参与构建,缩减构建时间,减少...
plugins: [visualizer()] }) 打包后,会在根目录下生成一个 stats.html文件,用浏览器打开后,如下图: vite-plugin-restart 通过监听文件修改,自动重启 vite 服务 最常用的场景就是监听 vite.config.js 和 .env.development 文件,修改 vite 配置文件和环境配置文件,是需要重启 vite 才会生效,通过这个插件,在修改...