vite-webpack-bundle-analyzer 1.0.4•Public• Publisheda year ago ViteWebpackBundle Analyzer Visualize size of Vite output files with an interactive zoomable treemap. Install NPM: npm install --save-dev vite-webpack-bundle-analyzer
查看项目的依赖,找出大块头 rollup-plugin-visualizer是一个打包体积分析插件,对应webpack中的webpack-bundle-analyzer。配置好后运行构建命令会生成一个stats.html。 bash 复制代码npm i rollup-plugin-visualizer -D js 复制代码import { visualizer } from 'rollup-plugin-visualizer' js 复制代码plugins: [ visualiz...
首先我们可以安装webpack-bundle-analyzer 插件,通过这个插件我们可以在打包的时候看到打包文件的大小,可以明显的看出哪些文件比较大。 1,去掉编译文件中map文件。在编译好后,我们会看到文件夹下有特别多的.map文件,这些文件主要是帮助我们线上调试代码,查看样式。所以为了避免部署包过大,通常都不生成这些文件。 在confi...
这次新项目中也需要用到体积分析,需要我找了很久,找到一个新的插件,基本上可以和webpack的体积分析差不多体验了。 插件:vite-bundle-analyzer 效果图: 相比较之前的还是挺好用的。 教程 先安装依赖: bash 复制代码 pnpm i vite-bundle-analyzer -D 然后去vite.config.ts中配置: typescript 复制代码 import{ de...
安装rollup插件: npm install rollup-plugin-analyzer -D vite.config.ts文件添加配置: import vue from "@vitejs/plugin-vue"; import visualizer from "rollup-plugin-visualizer"; const plugins = []; // 打包生产环境才引入的插件 if (process.env.NODE_ENV === "production") { // 打包依赖展示 plugi...
vite.config.ts文件添加配置: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 importvue from"@vitejs/plugin-vue"; importvisualizer from"rollup-plugin-visualizer"; const plugins = []; // 打包生产环境才引入的插件 ...
rollup-plugin-visualizer是一个打包体积分析插件,对应webpack中的webpack-bundle-analyzer。配置好后运行构建命令会生成一个stats.html。 bash 复制代码npm i rollup-plugin-visualizer -D js 复制代码import { visualizer } from'rollup-plugin-visualizer'
rollup-plugin-visualizer是一个打包体积分析插件,对应webpack中的webpack-bundle-analyzer。配置好后运行构建命令会生成一个stats.html。 npmirollup-plugin-visualizer -D import{ visualizer }from'rollup-plugin-visualizer' plugins: [visualizer({open: true}) ...
3.2 针对高版本打包 在vite 打包的时候,官方已经默认预设了打包兼容的浏览器是支持 esm 模式的浏览器,如果需要针对更高或者更低的浏览器,需要使用 build.target 去设置最终构建的浏览器兼容目标 4、webpack 分析优化 打包分析插件:webpack-bundle-analyzer plugins: ["webpack-bundle-analyzer"] CDN引入配置: { ex...
importanalyzefrom'rollup-plugin-analyzer'exportdefault{build:{rollupOptions:{plugins:[analyze()],},},} However@thekevinbrown, did you manage to port webpack-bundle-analyser into a vite plugin ? jnjacobson and HoPGoldy reacted with heart emoji ...