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

项目：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.pswp.cn/web/81262.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

科学养生：解锁现代健康生活新方式

科学养生：解锁现代健康生活新方式

在现代社会，熬夜加班、外卖快餐、久坐不动成了很多人的生活常态，由此引发的亚健康问题日益凸显。其实，遵循科学的养生方式，无需复杂操作，从日常细节调整，就能显著提升健康水平。​ 饮食上，把控…
阅读更多...
PostGIS使用小结

PostGIS使用小结

文章目录 PostGIS使用小结简介安装配合postgres使用的操作1.python安装gdal PostGIS使用小结 简介 PostGIS 是 PostgreSQL 数据库的地理空间数据扩展，通过为 PostgreSQL数据库增加地理空间数据类型、索引、函数和操作符，使其成为功能强大的空间数据库&…
阅读更多...
NNG和DDS

NNG和DDS

NNG (Nanomsg Next Generation) 和 DDS (Data Distribution Service) 是两种不同的通信协议，各自在不同场景下具有其优势。下面我将对这两种技术进行详细解释，并通过具体的例子来说明它们如何应用在实际场景中。 1. NNG (Nanomsg Next Generation) NNG简…
阅读更多...
自制操作系统day7（获取按键编码、FIFO缓冲区、鼠标、键盘控制器（Keyboard Controller, KBC）、PS/2协议）

自制操作系统day7（获取按键编码、FIFO缓冲区、鼠标、键盘控制器（Keyboard Controller, KBC）、PS/2协议）

day7 获取按键编码（hiarib04a） void inthandler21(int *esp) {struct BOOTINFO *binfo (struct BOOTINFO *) ADR_BOOTINFO; // 获取系统启动信息结构体指针unsigned char data, s[4]; // data: 键盘数据缓存&#x…
阅读更多...
Javase 基础加强 —— 09 IO流第二弹

Javase 基础加强 —— 09 IO流第二弹

本系列为笔者学习Javase的课堂笔记，视频资源为B站黑马程序员出品的《黑马程序员JavaAI智能辅助编程全套视频教程，java零基础入门到大牛一套通关》，章节分布参考视频教程，为同样学习Javase系列课程的同学们提供参考。 01 缓冲字节…
阅读更多...
服务器操作系统调优内核参数(方便查询)

服务器操作系统调优内核参数(方便查询)

fs.aio-max-nr1048576 #此参数限制并发未完成的异步请求数目，应该设置避免I/O子系统故障 fs.file-max1048575 #该参数决定了系统中所允许的文件句柄最大数目，文件句柄设置代表linux系统中可以打开的文件的数量 fs.inotify.max_user_watches8192000 #表…
阅读更多...
[Windows] 格式工厂 FormatFactory v5.20.便携版 ——多功能媒体文件转换工具

[Windows] 格式工厂 FormatFactory v5.20.便携版 ——多功能媒体文件转换工具

想要轻松搞定各类媒体文件格式转换？这款 Windows 平台的格式工厂 FormatFactory v5.20 便携版 正是你的不二之选！无需安装，即开即用，为你带来高效便捷的文件处理体验。 全能格式转换，满足多元需求 软件功能覆盖视频、…
阅读更多...
[AI]主流大模型、ChatGPTDeepseek、国内免费大模型API服务推荐（支持LangChain.js集成）

[AI]主流大模型、ChatGPTDeepseek、国内免费大模型API服务推荐（支持LangChain.js集成）

主流大模型特色对比表 模型核心优势适用场景局限性DeepSeek- 数学/代码能力卓越（GSM8K准确率82.3%）1- 开源生态完善（支持医疗/金融领域）7- 成本极低（API价格仅为ChatGPT的2%-3%）5科研辅助、代码开发、数据…
阅读更多...
国际荐酒师(香港)协会亮相新西兰葡萄酒巡展深度参与赵凤仪大师班

国际荐酒师(香港)协会亮相新西兰葡萄酒巡展深度参与赵凤仪大师班

国际荐酒师（香港）协会率团亮相2025新西兰葡萄酒巡展 深度参与赵凤仪MW“百年百碧祺”大师班 广州/上海/青岛，2025年5月12-16日——国际荐酒师（香港）协会（IRWA）近日率专业代表团出席“纯净独特&…
阅读更多...
Node.js Express 项目现代化打包部署全指南

Node.js Express 项目现代化打包部署全指南

Node.js Express 项目现代化打包部署全指南 一、项目准备阶段 1.1 依赖管理优化 # 生产依赖安装（示例） npm install express mongoose dotenv compression helmet# 开发依赖安装 npm install nodemon eslint types/node --save-dev1.2 环境变量配置 /…
阅读更多...
java基础知识回顾3（可用于Java基础速通）考前，面试前均可用！

java基础知识回顾3（可用于Java基础速通）考前，面试前均可用！

目录 一、基本算数运算符 二、自增自减运算符 三、赋值运算符 四、关系运算符 五、逻辑运算符 六、三元运算符 七、 运算符的优先级 八、小案例：在程序中接收用户通过键盘输入的数据 声明：本文章根据黑马程序员b站教学视频做的笔记，可…
阅读更多...
随机密码生成器：原理、实现与应用（多语言实现）

随机密码生成器：原理、实现与应用（多语言实现）

在当今数字化的时代，信息安全至关重要。而密码作为保护个人和敏感信息的第一道防线，其安全性直接关系到我们的隐私和数据安全。然而，许多人在设置密码时往往使用简单、易猜的组合，如生日、电话号码或常见的单词，这使得…
阅读更多...
TypeScript 泛型讲解

TypeScript 泛型讲解

如果说 TypeScript 是一门对类型进行编程的语言，那么泛型就是这门语言里的（函数）参数。本章，我将会从多角度讲解 TypeScript 中无处不在的泛型，以及它在类型别名、对象类型、函数与 Class 中的使用方式。 一、泛型的核…
阅读更多...
SQL 每日一题（6）

SQL 每日一题（6）

继续做题！ 原始表：employee_resignations表 employee_idresignation_date10012022-03-1510022022-11-2010032023-01-0510042023-07-1210052024-02-28 第一题： 查询累计到每个年度的离职人数 结果输出：年度、当年离职人数、累计…
阅读更多...
工业RTOS生态重构：从PLC到“端 - 边 - 云”协同调度

工业RTOS生态重构：从PLC到“端 - 边 - 云”协同调度

一、引言 在当今数字化浪潮席卷全球的背景下，工业领域正经历着深刻变革。工业自动化作为制造业发展的基石，其技术架构的演进直接关系到生产效率、产品质量以及企业的市场竞争力。传统的PLC（可编程逻辑控制器）架构虽然在工业控制领…
阅读更多...
从版本控制到协同开发：深度解析 Git、SVN 及现代工具链

从版本控制到协同开发：深度解析 Git、SVN 及现代工具链

前言：在当今软件开发的浪潮中，版本控制与协同开发无疑扮演着举足轻重的角色。从最初的单兵作战到如今大规模团队的高效协作，一套成熟且得力的版本控制系统以及围绕其构建的现代工具链，已然成为推动软件项目稳步前行的关键引擎。今…
阅读更多...
Visual Studio Code插件离线安装指南：从市场获取并手动部署

Visual Studio Code插件离线安装指南：从市场获取并手动部署

Visual Studio Code插件离线安装指南：从市场获取并手动部署 一、场景背景二、操作步骤详解步骤1：访问官方插件市场步骤2：定位目标版本步骤3：提取关键参数步骤4：构造下载链接步骤5：下载与安装 三、注意事项 …
阅读更多...
用HTML5实现实时ASCII艺术摄像头

用HTML5实现实时ASCII艺术摄像头

用HTML5实现实时ASCII艺术摄像头 项目简介 这是一个将摄像头画面实时转换为ASCII字符艺术的Web应用，基于HTML5和原生JavaScript实现。通过本项目可以学习到： 浏览器摄像头API的使用Canvas图像处理技术实时视频流处理复杂DOM操作性能优化技巧 功能亮点…
阅读更多...
论文审稿之我对SCI写作的思考

论文审稿之我对SCI写作的思考

有幸被邀请审过二区、三区、四区期刊的论文，近期审稿10余篇，分享一下我从一个审稿人的角度出发，如何提升自己写作的质量。 作图高清和好看，永远是排第一位。图中的字要清晰，有的放大200%还看不清字；每幅图的…
阅读更多...
MLA：Transformer的智能变形金刚——解密多头潜在注意力的进化密码

MLA：Transformer的智能变形金刚——解密多头潜在注意力的进化密码

第一章 MLA的进化之路：从MHA到智能变形 1.1 变形金刚的诞生背景 当LLM模型规模突破万亿参数量级时，传统Transformer的注意力机制开始显现"成长的烦恼"：训练阶段计算密集、推理阶段内存吃紧。DeepSeek团队的MLA如同给注意力模块装…
阅读更多...
最新文章

Copyright @ 2022~2023