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

vue-cli 构建打包优化（JeecgBoot-Vue2 配置优化篇）

backend 2025/5/22 5:24:27

项目：jeecgboot-Vue2

在项目二次开发后，在本人电脑打包时间为3分35秒左右

webpack5默认优化：

  1. Tree Shaking（摇树优化）：删除未使用的代码
  2. base64 内联： 小于 8KB 的资源（图片等）进行 Base64 内联，减少 HTTP 请求，会增加33%的大小
  3. …

原配置： vue.config.js

  1. 生产环境取消 console，productionSourceMap
  2. 生产环境js、css Gzip压缩
  3. less转译
  4. …
const path = require('path')
const CompressionPlugin = require("compression-webpack-plugin")function resolve(dir) {return path.join(__dirname, dir)
}module.exports = {productionSourceMap: false,publicPath:'/',configureWebpack: config => {// 生产环境取消 console.logif (process.env.NODE_ENV === 'production') {config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true}},chainWebpack: (config) => {config.resolve.alias.set('@$', resolve('src')).set('@api', resolve('src/api')).set('@assets', resolve('src/assets')).set('@comp', resolve('src/components')).set('@views', resolve('src/views'))// 生产环境，开启js\css压缩if (process.env.NODE_ENV === 'production') {config.plugin('compressionPlugin').use(new CompressionPlugin({test: /\.(js|css|less)$/, // 匹配文件名threshold: 10240, // 对超过10k的数据压缩deleteOriginalAssets: false // 不删除源文件}))}// 配置 webpack 识别 markdown 为普通的文件config.module.rule('markdown').test(/\.md$/).use().loader('file-loader').end()// 编译vxe-table包里的es6代码，解决IE11兼容问题config.module.rule('vxe').test(/\.js$/).include.add(resolve('node_modules/vxe-table')).add(resolve('node_modules/vxe-table-plugin-antd')).end().use().loader('babel-loader').end()},css: {loaderOptions: {less: {modifyVars: {/* less 变量覆盖，用于自定义 ant design 主题 */'primary-color': '#1890FF','link-color': '#1890FF','border-radius-base': '4px',},javascriptEnabled: true,}}},devServer: {port: 3000,proxy: {'/jeecg-boot': {target: 'http://localhost:8080',ws: false,changeOrigin: true},}},lintOnSave: undefined
}

优化后： 首次打包2分30秒，二次打包25秒

  1. CDN 外部依赖 (externals)，HTML 自动注入CDN
  2. 持久化缓存 (cache)，极大加速二次构建，修改配置后失效
  3. 移除 prefetch，避免预加载未使用的资源
  4. Moment.js 语言包裁剪，只保留中文语言包
  5. 图片压缩（image-webpack-loader）
  6. CSS压缩（CssMinimizerPlugin）
  7. JS压缩（terser）
  8. 多线程构建 (thread-loader），适用于中大型项目
const path = require('path')
const webpack = require('webpack')
const CompressionPlugin = require("compression-webpack-plugin")
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin')const assetsCDN = {externals: {'viser-vue': 'ViserVue'},js: ['//unpkg.com/viser-vue/umd/viser-vue.min.js'],css: []
}function resolve(dir) {return path.join(__dirname, dir)
}module.exports = {publicPath: '/',assetsDir: 'static',outputDir: 'dist',lintOnSave: undefined,filenameHashing: true,  		// 文件名哈希productionSourceMap: false,   // 生产环境的 source mapconfigureWebpack: (config) => {if (process.env.NODE_ENV === 'production') {// terser 配置，压缩JavaScript config.optimization.minimizer = [new TerserPlugin({terserOptions: {compress: {drop_console: true // 移除 console}}}),// css压缩new CssMinimizerPlugin(),]// 配置外部依赖config.externals = assetsCDN.externals;}// 缓存配置config.cache = {type: 'filesystem',buildDependencies: {config: [__filename],           // vue.config.js 变更时失效// dependencies: ['package.json']  // 依赖变更时失效（存在兼容性问题）},// 指定缓存位置，默认位置：node_modules/.cache/webpackcacheDirectory: path.resolve(__dirname, '.webpack_cache')   }},chainWebpack: (config) => {// 添加多线程构建config.module.rule('js').use('thread-loader').loader('thread-loader').options({workers: require('os').cpus().length - 1, // CPU核心数减1}).end()// 移除 prefetch，避免加载多余的资源config.plugins.delete('prefetch')// 只保留中文语言包config.plugin('ContextReplacementPlugin').use(webpack.ContextReplacementPlugin, [/moment[/\\]locale$/, /zh-cn/])// 配置别名config.resolve.alias.set('@$', resolve('src')).set('@api', resolve('src/api')).set('@assets', resolve('src/assets')).set('@comp', resolve('src/components')).set('@views', resolve('src/views'))if (process.env.NODE_ENV === 'production') {// 添加 CDN 配置到 HTMLconfig.plugin('html').tap(args => {args[0].cdn = assetsCDNreturn args})// 开启js\css Gzip压缩config.plugin('compressionPlugin').use(new CompressionPlugin({test: /\.(js|css|less)$/,   // 匹配文件名threshold: 10240,           // 对超过10k的数据压缩deleteOriginalAssets: false // 不删除源文件minRatio: 0.8,				// 压缩比小于0.8不予压缩}))// 图片压缩config.plugin('image-optimizer').use(ImageMinimizerPlugin, [{minimizer: {implementation: ImageMinimizerPlugin.squooshMinify,options: {encodeOptions: {mozjpeg: { quality: 80 },webp: { lossless: true },},},},}]);// 分包策略config.optimization.splitChunks({chunks: 'all',minSize: 20000,maxSize: 244000,maxAsyncRequests: 30,   // 按需加载时的最大并行请求数maxInitialRequests: 20, // 入口点上的最大并行请求数cacheGroups: {vendors: {test: /[\\/]node_modules[\\/]/,priority: -10},common: {minChunks: 2,priority: -20,reuseExistingChunk: true}}})}// 配置 webpack 识别 markdown 为普通的文件config.module.rule('markdown').test(/\.md$/).use().loader('file-loader').end()// 编译vxe-table包里的es6代码，解决IE11兼容问题config.module.rule('vxe').test(/\.js$/).include.add(resolve('node_modules/vxe-table')).add(resolve('node_modules/vxe-table-plugin-antd')).end().use().loader('babel-loader').end()},css: {loaderOptions: {less: {modifyVars: {/* less 变量覆盖，用于自定义 ant design 主题 */'primary-color': '#1890FF','link-color': '#1890FF','border-radius-base': '4px'},javascriptEnabled: true}}},devServer: {port: 3000,client: {overlay: {runtimeErrors: false}},proxy: {target: 'http://localhost:8080',ws: false,changeOrigin: true}}}
}

继续优化： 首次打包1分50秒，二次打包25秒

  1. ESBuild ：替代 terser + babel + thread-loader，ESBuild 本身启用多线程打包，用ESBuild加速JS转译，极大提升构建速度，需要考虑兼容性（现代浏览器）
  2. Brotli 压缩：Gzip 压缩率高 15%~25%，但压缩速度稍慢。需要服务器支持和浏览器支持，前端构建时预生成 .br 和 .gz，可通过浏览器请求头判断支持，服务器动态响应
const path = require('path')
const webpack = require('webpack')
const CompressionPlugin = require("compression-webpack-plugin")
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
const { EsbuildPlugin } = require('esbuild-loader')
const BrotliPlugin = require('brotli-webpack-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');// 注意版本
const assetsCDN = {externals: {'viser-vue': 'ViserVue','ant-design-vue': 'antd','vue': 'Vue','vue-router': 'VueRouter','vuex': 'Vuex'},js: ['//unpkg.com/viser-vue/umd/viser-vue.min.js','//unpkg.com/ant-design-vue@3.2.6/dist/antd.min.js','//unpkg.com/vue@3.2.47/dist/vue.global.prod.js','//unpkg.com/vue-router@4.2.2/dist/vue-router.global.prod.js','//unpkg.com/vuex@4.1.0/dist/vuex.global.prod.js'],css: ['//unpkg.com/ant-design-vue@3.2.6/dist/antd.min.css']
}function resolve(dir) {return path.join(__dirname, dir)
}module.exports = {publicPath: '/',assetsDir: 'static',outputDir: 'dist',lintOnSave: undefined,filenameHashing: true,  		// 文件名哈希productionSourceMap: false,   // 生产环境的 source mapconfigureWebpack: (config) => {if (process.env.NODE_ENV === 'production') {config.optimization.minimizer = [new EsbuildPlugin ({target: 'es2015',  // 压缩为 ES6drop: ['console'], // 移除 consolecss: false}),new CssMinimizerPlugin()]// 配置外部依赖config.externals = assetsCDN.externals;}// 缓存配置config.cache = {type: 'filesystem',buildDependencies: {config: [__filename],           // vue.config.js 变更时失效// dependencies: ['package.json']  // 依赖变更时失效（存在兼容性问题）},// 指定缓存位置，默认位置：node_modules/.cache/webpackcacheDirectory: path.resolve(__dirname, '.webpack_cache')   }},chainWebpack: (config) => {// 移除 prefetch，避免加载多余的资源config.plugins.delete('prefetch')// 只保留中文语言包config.plugin('ContextReplacementPlugin').use(webpack.ContextReplacementPlugin, [/moment[/\\]locale$/, /zh-cn/])// 配置别名config.resolve.alias.set('@$', resolve('src')).set('@api', resolve('src/api')).set('@assets', resolve('src/assets')).set('@comp', resolve('src/components')).set('@views', resolve('src/views'))if (process.env.NODE_ENV === 'production') {// 添加 CDN 配置到 HTMLconfig.plugin('html').tap(args => {args[0].cdn = assetsCDNreturn args})// 开启 Gzip 和 Brotli 压缩config.plugin('compressionPlugin').use(new CompressionPlugin({test: /\.(js|css|less|scss|html|svg)$/,threshold: 10240,minRatio: 0.8,deleteOriginalAssets: false}))config.plugin('brotliPlugin').use(new BrotliPlugin({test: /\.(js|css|less|scss|html|svg)$/,threshold: 10240,minRatio: 0.8,deleteOriginalAssets: false}))// 图片压缩config.plugin('image-optimizer').use(ImageMinimizerPlugin, [{minimizer: {implementation: ImageMinimizerPlugin.squooshMinify,options: {encodeOptions: {mozjpeg: { quality: 80 },webp: { lossless: true },},},},}]);// 分包策略config.optimization.splitChunks({chunks: 'all',minSize: 20000,maxSize: 244000,maxAsyncRequests: 30,   // 按需加载时的最大并行请求数maxInitialRequests: 20, // 入口点上的最大并行请求数cacheGroups: {vendors: {test: /[\\/]node_modules[\\/]/,priority: -10},common: {minChunks: 2,priority: -20,reuseExistingChunk: true}}})}// 配置 webpack 识别 markdown 为普通的文件config.module.rule('markdown').test(/\.md$/).use().loader('file-loader').end()// ESBuild 转译 JS（替代 Babel）config.module.rule('js').test(/\.js$/).exclude.add(/node_modules/).end().use('esbuild-loader').loader('esbuild-loader').options({ loader: 'jsx', target: 'es2015' });},css: {loaderOptions: {less: {modifyVars: {/* less 变量覆盖，用于自定义 ant design 主题 */'primary-color': '#1890FF','link-color': '#1890FF','border-radius-base': '4px'},javascriptEnabled: true}}},devServer: {port: 3000,client: {overlay: {runtimeErrors: false}},proxy: {target: 'http://localhost:8080',ws: false,changeOrigin: true}}}
}
http://www.xdnf.cn/news/7788.html

相关文章：

  • Hadoop-HA高可用集群启动nameNode莫名挂掉，排错解决
  • digitalworld.local: FALL靶场
  • Mysql-数据闪回工具MyFlash
  • SQL查询, 响应体临时字段报: Unknown column ‘data_json_map‘ in ‘field list‘
  • leetcode 92. Reverse Linked List II
  • 张 Prompt Tuning--中文数据准确率提升：理性与冲动识别新突破
  • 分类算法 Kmeans、KNN、Meanshift 实战
  • maven之pom.xml
  • 【25软考网工】第七章（3） UOS Linux防火墙配置和Web应用服务配置
  • OpenHarmony外设驱动使用 （九），Pin_auth
  • 国产化Excel处理组件Spire.XLS for .NET系列教程：通过 C# 将 TXT 文本转换为 Excel 表格
  • 物业后勤小程序源码介绍
  • 【项目记录】准备工作及查询部门
  • python-leetcode 71.每日温度
  • Vue 3.0中核心的Composition API
  • 打造一个支持MySQL查询的MCP同步插件：Java实现
  • PCB智能报价系统——————仙盟创梦IDE
  • Python实例题：PyOt实现简易浏览器
  • leetcode字符串篇【公共前缀】：14-最长公共前缀
  • C语言-9.指针
  • “交互式“ PDF 与“静态“ PDF 表单的区别
  • liinux系统安装Helm
  • 系统数据对接-从获取到处理的全流程
  • PH热榜 | 2025-05-20
  • Ubuntu24.04安装Dify
  • YOLO中model.predict方法返回内容Results详解
  • 智能笔记助手-NotepadAI使用指南
  • 【大模型面试每日一题】Day 24：假设训练资源有限，如何在模型参数量、训练数据量和训练时长三者间做权衡？
  • MySQL之数据库基础知识，库和表的操作以及基础数据类型
  • Paillier加密方案的原理、实现与应用（dev）