rollup-plugin-visualizer是一个用于Rollup构建工具的插件,它可以生成可视化的构建报告,帮助开发者更好地了解构建过程中的文件大小、依赖关系等信息。 使用rollup-plugin-visualizer插件,可以在构建完成后生成一个交互式的HTML报告,其中包含了构建过程中的各种统计信息,如文件大小、依赖
module.exports={plugins:[// put it lastvisualizer(),],}; Usage with rolldown (rolldown.config.ts) import{defineConfig,typeRolldownPlugin}from'rolldown';exportdefaultdefineConfig({plugins:[visualizer()asRolldownPlugin],}) Usage with vite (vite.config.js) ...
rollup-plugin-visualizer:一个用于 Rollup 构建系统的插件,它能够生成可视化的报告,展示你的项目构建后的模块依赖关系和文件大小。 仓库:https://github.com/btd/rollup-plugin-visualizer 安装: yarn add rollup-plugin-visualizer 配置(vite.config.ts): import { defineConfig }from'vite'; import { visualizer }...
复制代码npm install rollup-plugin-visualizer -D vite配置 // vite.config.js import { defineConfig } from 'vite' import { visualizer } from 'rollup-plugin-visualizer' export default defineConfig({ plugins: [visualizer()] }) 打包后,会在根目录下生成一个 stats.html文件,用浏览器打开后,如下图:...
插件应该有一个带有 rollup-plugin-前缀的明确名称。 在package.json 中包含 rollup-plugin 关键字。 插件应该支持测试,推荐 mocha 或者 ava 这类开箱支持 promises 的库。 尽可能使用异步方法。 用英语记录你的插件。 确保你的插件输出正确的 sourcemap。
所谓Tree Shaking(摇树),也是计算机编译原理中DCE(Dead Code Elimination,即消除无用代码) 技术的一种实现。由于 ES 模块依赖关系是确定的,和运行时状态无关。因此 Rollup 可以在编译阶段分析出依赖关系,对 AST 语法树中没有使用到的节点进行删除,从而实现 Tree Shaking。
配置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 { visualizer } from "rollup-plugin-visualizer"; import VueDevTools from 'vite-plugin-vue-devtools' // https://vitejs.dev/config/ export default defineConfig({ server: { port: 3003 }, plugins: [ vue(), //VueDevTools(),
@rollup/plugin-babel:在 Rollup 中使用 Babel 进行 JS 代码的语法转译。 @rollup/plugin-typescript: 支持使用 TypeScript 开发。 @rollup/plugin-alias:支持别名配置。 @rollup/plugin-replace:在 Rollup 进行变量字符串的替换。 rollup-plugin-visualizer: 对 Rollup 打包产物进行分析,自动生成产物体积可视化分析图...
使用rollup-plugin-visualizer进行模块分析。 import * as xx from 'lib' 改成命名导入。 静态资源(json文件)提取至public文件夹。 删除app.component(name, component)全局组件注册,会导致全量构建。 build.rollupOptions.output.manualChunks 拆包优化。 优化结果 减少模块体积。 json文件不参与构建,缩减构建时间,减少...