Vue 项目文件大小优化

优化逻辑

任何优化需求,都有一个前提,即可衡量。

那 Vue 加载速度的优化需求,本质上是要降低加载静态资源的大小。

所以,优化前,需要有一个了解项目现状的资源加载大小情况。

主要分 3 步走:

  • 找到方法测量打包文件大小的方式。

  • 完成打包文件大小的测量。

  • 根据测量结果,对大文件进行针对性地优化处理。

思路捋顺后,核心就是要找到一个可测量的工具

而要测量项目运行包的各个文件大小,关键在于要测量项目打包构建后的各个文件大小。

所以测量工具插件,和打包环境密切相关。

不同的环境下,有不同的测量工具。

以下罗列了当前 Vue3 项目下常用的打包环境及包大小测量和分析插件。

Vue3 + Vite 环境

安装插件

bash 复制代码
npm install vite-plugin-compression --save-dev

配置插件

vite.config.js 文件中添加 rollup-plugin-visualizer 插件的配置,如下:

bash 复制代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { visualizer } from 'rollup-plugin-visualizer'  // 引入 visualizer 插件

export default defineConfig({
  plugins: [
    vue(),
    visualizer({
      open: true,  // 构建完成后会自动打开浏览器,显示可视化报告。如果您不想自动打开,可以设置为 false。
      filename: 'stats.html',  // 生成的报告文件名称,默认保存为项目根目录下的 stats.html 文件,您可以修改路径和文件名。
      gzipSize: true,  // 显示各文件在经过 gzip 压缩后的大小
      brotliSize: true  // 显示各文件在经过 brotli 压缩后的大小
    })
  ],
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    }
  }
});

构建项目生成报告

bash 复制代码
npm run build

构建完成后,按照配置会自动生成报告 stats.html 文件。

如果配置为 open:true,则会在构建完成后自动打开报告页面。

报告示例

如上图,打包文件占比较大的主要是以下 3 个包/文件:

  • element-plus:

  • lodash.js

  • ort.min.js

所以,根据占比较大的文件去做针对性的优化即可。

Vue3 + Vue Cli 环境(Webpack打包)

安装插件

bash 复制代码
npm install --save-dev webpack-bundle-analyzer

配置插件

vue.config.js 中引入并配置 webpack-bundle-analyzer 插件。

bash 复制代码
const { defineConfig } = require('@vue/cli-service')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      new BundleAnalyzerPlugin({
        analyzerMode: 'static', // 生成静态 HTML 文件
        openAnalyzer: true, // 构建完成后自动打开浏览器展示报告
        reportFilename: 'bundle-report.html', // 报告文件名,可以自定义路径和名称
      }),
    ],
  },
});

构建项目生成报告

在配置完成后,您可以运行以下命令构建项目,并生成报告:

bash 复制代码
npm run build

构建完成后,webpack-bundle-analyzer 会生成一个静态的 HTML 文件(默认在 dist/ 目录下,或根据 reportFilename 的配置),并自动在浏览器中打开。可以在报告中查看每个模块的体积以及其依赖关系。

报告示例

Vue3 + Rollup 环境

安装插件

bash 复制代码
npm install --save-dev rollup-plugin-visualizer

配置插件

rollup.config.js 文件中添加该插件:

bash 复制代码
import { visualizer } from 'rollup-plugin-visualizer';

export default {
  input: 'src/main.js', // 项目的入口文件
  output: {
    file: 'dist/bundle.js', // 输出文件
    format: 'es',
  },
  plugins: [
    // 其他插件
    visualizer({
      open: true, // 构建完成后自动打开浏览器展示报告
      filename: 'stats.html', // 生成的报告文件名
      gzipSize: true, // 显示 gzip 压缩后的大小
      brotliSize: true // 显示 brotli 压缩后的大小
    })
  ],
};

构建项目生成报告

bash 复制代码
npx rollup -c

构建完成后,按照配置会自动生成报告 stats.html 文件。

如果配置为 open:true,则会在构建完成后自动打开报告页面。

相关推荐
java水泥工3 小时前
课程答疑系统|基于SpringBoot和Vue的课程答疑系统(源码+数据库+文档)
spring boot·vue·计算机毕业设计·java毕业设计·大学生毕业设计·课程答疑系统
Pu_Nine_98 小时前
Vue 3 + TypeScript 项目性能优化全链路实战:从 2.1MB 到 130KB 的蜕变
前端·vue.js·性能优化·typescript·1024程序员节
阿洛学长15 小时前
高质量 AI 提示词之(从 0-1 开发 Vue 项目)
vue·ai编程·1024程序员节
wudl556616 小时前
JDK 21性能优化详解
java·开发语言·性能优化
IT教程资源D16 小时前
[N_149]基于微信小程序网上商城系统
mysql·vue·前后端分离·springboot网上商城·网上商城小程序
ytgytg2817 小时前
芋道源码:VUE3部署:避坑--验证码不现显示,管理后台无法访问后端接口等,完善中。。。
java·vue
浔川python社18 小时前
C++ 实际应用系列(第六部分):并发系统的性能优化与工程实践(完)
开发语言·c++·性能优化
一只叫煤球的猫1 天前
MySQL 索引的 “最左前缀原则”,用查字典的例子讲透
数据库·mysql·性能优化
学会煎墙1 天前
使用uniapp——实现微信小程序的拖拽排序(vue3+ts)
微信小程序·uni-app·vue·ts
2501_915106321 天前
深入剖析 iOS 26 系统流畅度,多工具协同监控与性能优化实践
android·ios·性能优化·小程序·uni-app·cocoa·iphone