Vite:rollup-plugin-visualizer查看打包体积分析report报告

简介: Vite:rollup-plugin-visualizer查看打包体积分析report报告

安装依赖

pnpm i rollup-plugin-visualizer -D

配置

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { visualizer } from 'rollup-plugin-visualizer'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      plugins: [visualizer()]
    },
  }
})

打包之后会生成一个文件stats.html

image.png

参考


相关文章
|
8月前
|
缓存 并行计算 PyTorch
PyTorch CUDA内存管理优化:深度理解GPU资源分配与缓存机制
本文深入探讨了PyTorch中GPU内存管理的核心机制,特别是CUDA缓存分配器的作用与优化策略。文章分析了常见的“CUDA out of memory”问题及其成因,并通过实际案例(如Llama 1B模型训练)展示了内存分配模式。PyTorch的缓存分配器通过内存池化、延迟释放和碎片化优化等技术,显著提升了内存使用效率,减少了系统调用开销。此外,文章还介绍了高级优化方法,包括混合精度训练、梯度检查点技术及自定义内存分配器配置。这些策略有助于开发者在有限硬件资源下实现更高性能的深度学习模型训练与推理。
1500 0
|
Java 关系型数据库 数据库连接
Idea使用Mybatis Generator 自动生成代码
(1)创建一个maven工程 (2)配置pom文件 mysql mysql-connector-java 5.
3209 0
|
Web App开发 开发者
|
数据可视化 Apache 索引
Vue3使用echarts仪表盘(gauge)
Apache ECharts 是一款强大的数据可视化库,其仪表盘图表(`gauge`)可用于展示度量数据。主要属性包括仪表盘数据源 `gaugeData`(必填)、容器宽度 `width`(默认 100%)及高度 `height`(默认 100%)。数据项需指定名称 `name` 和值 `value`,并支持额外属性。
1773 2
Vue3使用echarts仪表盘(gauge)
|
缓存 前端开发 JavaScript
前端开发的必修课:如何让你的网页在弱网环境下依然流畅运行?
【10月更文挑战第30天】随着移动互联网的普及,弱网环境下的网页性能优化变得尤为重要。本文从了解弱网环境、优化资源加载、减少HTTP请求、调整弱网参数和代码优化等方面,提供了详细的指南,帮助前端开发者提升网页在弱网环境下的性能,改善用户体验。
617 3
|
前端开发 JavaScript 开发者
构建工具对比:Webpack与Rollup的前端工程化实践
【10月更文挑战第11天】本文对比了前端构建工具Webpack和Rollup,探讨了它们在模块打包、资源配置、构建速度等方面的异同。通过具体示例,展示了两者的基本配置和使用方法,帮助开发者根据项目需求选择合适的工具。
333 3
|
JavaScript
vue3 vite配置@根路径---解决:找不到模块“./xx/xxx.vue”或其相应的类型声明
vue3 vite配置@根路径---解决:找不到模块“./xx/xxx.vue”或其相应的类型声明
4076 0
|
JavaScript
Vue.js中使用.prevent和.stop修饰符
Vue.js中使用.prevent和.stop修饰符
npm install 太慢?解决方法
npm install 太慢?解决方法
11504 0
|
缓存 前端开发 JavaScript
怎么解决canvas中获取跨域图片数据的问题?
怎么解决canvas中获取跨域图片数据的问题?
682 0

热门文章

最新文章