当前位置：首页 > news >正文

Vue2项目集成打包分析工具webpack-bundle-analyzer

news 2025/9/18 6:27:40

在 Vue2 项目中集成 webpack-bundle-analyzer 可以帮助你可视化分析打包后的资源构成，找出体积过大的模块，从而进行优化。以下是具体实现步骤：

1. 安装依赖

首先安装 webpack-bundle-analyzer 作为开发依赖：

npm install webpack-bundle-analyzer --save-dev
# 或 yarn add webpack-bundle-analyzer -D

2. 在 `vue.config.js` 中配置插件

修改你的 vue.config.js，通过环境变量控制是否启用分析插件（避免影响正常构建）：

'use strict'
const path = require('path')
const webpack = require('webpack')
// 引入分析插件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPluginfunction resolve(dir) {return path.join(__dirname, dir)
}const name = process.env.VUE_APP_TITLE || '冲锋衣企业管理后台'
const port = process.env.port || process.env.npm_config_port || 80// 判断是否需要启用分析插件（通过环境变量控制）
const isAnalyze = process.env.ANALYZE === 'true'module.exports = {publicPath: process.env.NODE_ENV === "production" ? "/" : "/",outputDir: 'dist',assetsDir: 'static',lintOnSave: process.env.NODE_ENV === 'development',productionSourceMap: false,devServer: {host: '0.0.0.0',port: port,open: true,proxy: {[process.env.VUE_APP_BASE_API]: {target: 'http://sanmencfy.com:7081/jyou-sm-admin',changeOrigin: true,pathRewrite: {['^' + process.env.VUE_APP_BASE_API]: ''}}},disableHostCheck: true},configureWebpack: {name: name,resolve: {alias: {'@': resolve('src')}},plugins: [new webpack.ProvidePlugin({'window.Quill': 'quill/dist/quill.js',Quill: 'quill/dist/quill.js'}),// 仅在需要分析时添加插件...(isAnalyze ? [new BundleAnalyzerPlugin()] : [])]},chainWebpack(config) {// 已有的 chainWebpack 配置...config.plugins.delete('preload')config.plugins.delete('prefetch')config.module.rule('svg').exclude.add(resolve('src/assets/icons')).end()config.module.rule('icons').test(/\.svg$/).include.add(resolve('src/assets/icons')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]'}).end()config.module.rule('css').oneOf('tailwind').test(/TailwindPage.*\.css$/).use('postcss-loader').loader('postcss-loader').options({postcssOptions: {config: path.resolve(__dirname, 'postcss.config.js')}}).tap(options => {options = options || {}options.postcssOptions = options.postcssOptions || {plugins: []}return options}).end().end()config.module.rule('css').oneOf('normal').exclude.add('/TailwindPage/').end()config.when(process.env.NODE_ENV !== 'development',config => {config.plugin('ScriptExtHtmlWebpackPlugin').after('html').use('script-ext-html-webpack-plugin', [{inline: /runtime\..*\.js$/}]).end()config.optimization.splitChunks({chunks: 'all',cacheGroups: {libs: {name: 'chunk-libs',test: /[\\/]node_modules[\\/]/,priority: 10,chunks: 'initial'},elementUI: {name: 'chunk-elementUI',priority: 20,test: /[\\/]node_modules[\\/]_?element-ui(.*)/},commons: {name: 'chunk-commons',test: resolve('src/components'),minChunks: 3,priority: 5,reuseExistingChunk: true}}})config.optimization.runtimeChunk('single'),{from: path.resolve(__dirname, './public/robots.txt'),to: './'}})}
}

3. 在 `package.json` 中添加分析脚本

在 scripts 中添加一个专门用于分析的命令，通过环境变量 ANALYZE=true 触发插件：

{"scripts": {"dev": "vue-cli-service serve","build:prod": "vue-cli-service build","build:stage": "vue-cli-service build --mode staging","preview": "node build/index.js --preview","lint": "eslint --ext .js,.vue src",// 新增：运行此命令将构建并分析打包结果"analyze": "cross-env ANALYZE=true vue-cli-service build"}
}