配置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: { rollupOptions: { plugins: [visualizer()] }, } }...
装包 yarn add rollup-plugin-visualizer 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' // ht...
"rollup-plugin-copy": "^3.4.0", "rollup-plugin-peer-deps-external": "^2.2.4", "rollup-plugin-postcss": "^4.0.2", "rollup-plugin-scss": "^4.0.0", "rollup-plugin-terser": "^7.0.2", "rollup-plugin-typescript2": "^0.34.1", "rollup-plugin-visualizer": "^5.9.0", "sass": ...
1、使用rollup-plugin-visualizer 可视化分析包 npm i rollup-plugin-visualizer -S 在vite.config.js中引入 在plugins里面 然后执行npm run build就自动打开可视化分析 2、 CDN加速 在vite.config.js中引入 import { autoComplete, Plugin as importToCDN } from "vite-plugin-cdn-import"; 3、开启Gzip压缩 npm ...
代码层面的优化。如:组件、样式的抽取,路由懒加载、Vue3性能优化、代码层面优化 等等 本篇文章主要讲述的是生产环境下 Vite + Vue3 打包优化。 1. 依赖视图分析(rollup-plugin-visualizer) 优化的主要难点在于从哪里开始去优化。如果不清楚自己的项目问题出现在哪里,就显得比较盲目。我们可以通过插件工具先分析一下项...
import vueDevTools from 'vite-plugin-vue-devtools' import { visualizer } from 'rollup-plugin-visualizer' import externalGlobals from 'rollup-plugin-external-globals' // https://vitejs.dev/config/ export default defineConfig({ // base: 'doc', ...
分析依赖模块的大小占比，可以让我们更有针对性的进行体积优化。我们通常使用rollup-plugin-visualizer插件...
import{visualizer}from'rollup-plugin-visualizer';exportdefaultdefineConfig({plugins:[vue(),vueJsx(),visualizer()],}); 在执行npm run build命令后,项目就把项目代码打包在根目录的 dist 目录下,并且根目录下多了一个文件 stat.html, 可以看到代码体积图。根据对代码体积分析,确定是否需要用懒加载和按需加载...
在vite.config.ts中引入rollup-plugin-visualizer插件,并将其添加到插件列表中。 执行命令yarn build打包出来,视图会自动跳出,保存在项目根目录下 stats.html这个就是的视图文件,可以直观的看到各个模块占据空间的大小 配置打包文件分类输出 将js,css,图片等资源分别打包到对应的文件夹下,这种方式适合小型项目或者需要快...
由于我们使用的是vite vite打包是基于rollup 的我们可以使用 rollup 的插件 npm install rollup-plugin-visualizer vite.config.ts 配置 记得设置open 不然无效 import { visualizer } from 'rollup-plugin-visualizer'; plugins: [vue(), vueJsx(),visualizer({ open:true })], 然后进行npm run build打包 我在...