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
繁體地址，請注明出處：http://hk.pswp.cn/web/81262.shtml
英文地址，請注明出處：http://en.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