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

理解vue-cli 中进行构建优化

article 2025/5/31 14:18:46

在 Vue CLI 项目中进行构建优化，是前端性能提升的重要手段。它涉及到 Webpack 配置、代码分包、懒加载、依赖优化、图片压缩等多个方面。

🧱 基础构建优化

设置生产环境变量

NODE_ENV=production

Vue CLI 会自动在 npm run build 时开启以下优化：

压缩 JS / CSS
移除 console 和 debugger
自动分离 vendor 文件（依赖包）

开启 gzip 压缩

使用 compression-webpack-plugin：

npm install compression-webpack-plugin -D

// vue.config.js
const CompressionWebpackPlugin = require('compression-webpack-plugin')module.exports = {configureWebpack: {plugins: [new CompressionWebpackPlugin({algorithm: 'gzip',test: /\.(js|css|html|svg)$/,threshold: 10240,minRatio: 0.8})]}
}

去除 map 文件

module.exports = {productionSourceMap: false
}

📦 代码层优化

路由懒加载（代码分割）

const Home = () => import(‘@/views/Home.vue’)

打包时，每个路由页面都会单独分包。

使用 CDN 加载库文件

把 Vue、Vuex、Vue Router 等用 CDN 引入：

// vue.config.js
module.exports = {configureWebpack: {externals: {vue: 'Vue','vue-router': 'VueRouter',vuex: 'Vuex'}}
}

然后在 public/index.html 中引入 CDN：

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>

Tree Shaking & 按需引入

避免全量引入组件库，例如：

// ❌ 错误
import ElementPlus from 'element-plus'
app.use(ElementPlus)// ✅ 推荐
import { ElButton, ElSelect } from 'element-plus'
app.use(ElButton).use(ElSelect)

🧠 Webpack 配置层优化（Vue CLI 内部使用 Webpack）

使用缓存

// vue.config.js
module.exports = {chainWebpack: config => {config.cache(true)}
}

分析包体积

npm install webpack-bundle-analyzer -D

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPluginmodule.exports = {configureWebpack: {plugins: [new BundleAnalyzerPlugin()]}
}

🖼 资源层优化

图片压缩

使用 image-webpack-loader：

npm install image-webpack-loader -D

module.exports = {chainWebpack: config => {config.module.rule('images').use('image-webpack-loader').loader('image-webpack-loader').options({mozjpeg: { progressive: true, quality: 65 },pngquant: { quality: [0.65, 0.90], speed: 4 }})}
}

图片懒加载

npm install vue-lazyload

import VueLazyload from 'vue-lazyload'
app.use(VueLazyload, { loading: 'loading.png' })

🧊 缓存优化（浏览器缓存策略）

文件名加 hash（默认支持）

Vue CLI 打包后文件名默认带有 [hash]，有助于浏览器缓存：

app.234d7f.js

静态资源持久缓存（使用 CDN + Cache-Control）

在 nginx 或服务端配置：

Cache-Control: max-age=31536000

✅ 总结表格

优化项	方法	效果
路由懒加载	import() 异步组件	减少初始加载体积
CDN 加载依赖	externals + script 标签	减少 bundle 体积
gzip 压缩	compression-webpack-plugin	减少传输体积
移除 console	terser 插件自动处理	减少无用代码
图片压缩	image-webpack-loader	优化图片大小
分析构建	webpack-bundle-analyzer	找出最大依赖
map 文件移除	productionSourceMap: false	避免泄露源代码
资源缓存	hash 文件名 + Cache-Control	浏览器缓存优化

示例

以下是一个Vue CLI 项目中的完整优化配置文件 vue.config.js，包含以下功能：
• 关闭 source map
• 使用 CDN 外部引入 Vue、Vuex、Vue Router
• gzip 压缩
• 图片压缩
• 移除 console/debugger
• 打包分析器（可选）

✅ vue.config.js

const CompressionWebpackPlugin = require('compression-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const isProd = process.env.NODE_ENV === 'production'module.exports = {productionSourceMap: false, // 关闭 source mapconfigureWebpack: config => {const plugins = []// gzip 压缩if (isProd) {plugins.push(new CompressionWebpackPlugin({algorithm: 'gzip',test: /\.(js|css|html|svg)$/,threshold: 10240,minRatio: 0.8}))}// CDN 依赖（在 index.html 中引入）config.externals = isProd? {vue: 'Vue','vue-router': 'VueRouter',vuex: 'Vuex'}: {}config.plugins = [...config.plugins, ...plugins]},chainWebpack: config => {// 图片压缩config.module.rule('images').use('image-webpack-loader').loader('image-webpack-loader').options({mozjpeg: { progressive: true, quality: 65 },optipng: { enabled: false },pngquant: { quality: [0.65, 0.9], speed: 4 },gifsicle: { interlaced: false },webp: { quality: 75 }})// 打包分析（按需启用）if (process.env.ANALYZE) {config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)}},// 移除 console/debugger（可选）configureWebpack: config => {if (isProd) {config.optimization = {minimizer: [new TerserPlugin({terserOptions: {compress: {drop_console: true,drop_debugger: true}},extractComments: false})]}}}
}

✅ 还需要在 public/index.html 中引入 CDN（用于生产环境）

<!-- public/index.html -->
<head><title>Vue App</title><% if (process.env.NODE_ENV === 'production') { %><script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script><script src="https://cdn.jsdelivr.net/npm/vuex@4.1.0/dist/vuex.global.prod.js"></script><script src="https://cdn.jsdelivr.net/npm/vue-router@4.1.0/dist/vue-router.global.prod.js"></script><% } %>
</head>

理解vue-cli 中进行构建优化

在 Vue CLI 项目中进行构建优化，是前端性能提升的重要手段。它涉及到 Webpack 配置、代码分包、懒加载、依赖优化、图片压缩等多个方面。 🧱 基础构建优化设置生产环境变量 NODE_ENVproduction Vue CLI 会自动在 npm run build 时开启以下优化&…...

编程日记 2025/5/31 14:18:46

理解计算机系统_线程(九):线程安全问题

前言以<深入理解计算机系统>(以下称“本书”)内容为基础，对程序的整个过程进行梳理。本书内容对整个计算机系统做了系统性导引,每部分内容都是单独的一门课.学习深度根据自己需要来定引入接续理解计算机系统_线程(八):并行-CSDN博客,内容包括12.7…...

编程日记 2025/5/31 12:49:29

vue3基本类型和对象类型的响应式数据

vue3中基本类型和对象类型的响应式数据 OptionsAPI与CompstitionAPI的区别 OptionsAPI Options API • 特点：基于选项（options）来组织代码，将逻辑按照生命周期、数据、方法等分类。• 结构：代码按照 data 、 methods…...

编程日记 2025/5/31 12:03:30

3.8.4 利用RDD实现分组排行榜

本实战任务通过Spark RDD实现学生成绩的分组排行榜。首先，准备包含学生成绩的原始数据文件，并将其上传至HDFS。接着，利用Spark的交互式环境或通过创建Maven项目的方式，读取HDFS中的成绩文件生成RDD。通过map操作将数据映射为二元组…...

编程日记 2025/5/31 11:54:31

python web flask专题-Flask入门指南：从安装到核心功能详解

Flask入门指南：从安装到核心功能详解 Flask作为Python最流行的轻量级Web框架之一，以其简洁灵活的特性广受开发者喜爱。本文将带你从零开始学习Flask，涵盖安装配置、项目结构、应用实例、路由系统以及请求响应处理等核心知识点。 1. Flask安…...

编程日记 2025/5/31 4:32:23

C语言中的“类框架”工具

C语言中的“框架”：库与轻量级工具生态解析一、C语言的设计哲学与框架定位 C语言作为一门系统级编程语言，核心目标是提供高效、灵活的底层控制能力。与Java、Python等高级语言不同，C语言本身不内置全栈框架…...

编程日记 2025/5/31 20:47:38

【HW系列】—web组件漏洞（Strtus2和Apache Log4j2）

本文仅用于技术研究，禁止用于非法用途。文章目录 Struts2Struts2 框架介绍Struts2 历史漏洞汇总（表格）Struts2-045 漏洞详解 Log4j2Log4j2 框架介绍Log4j2 漏洞原理1. JNDI 注入2. 利用过程 Log4j2 历史漏洞JNDILDAP 反弹 Shell 流程 Strut…...

编程日记 2025/5/31 6:44:24

第六十八篇从“超市收银系统崩溃”看JVM性能监控与故障定位实战

目录引言：当技术问题遇上生活场景一、JVM的“超市货架管理哲学”二、收银员工具箱：JVM监控三板斧三、典型故障诊断实录四、防患于未然的运维智慧五、结语：从故障救火到体系化防控引言：当技术问题遇上生活场景想象一个周末的傍…...

编程日记 2025/5/31 8:24:36

Debian 11 之使用hostapd与dnsmasq进行AP设置

目录 1: 安装必要的软件2: 配置dnsmasq3: 配置 hostapd4: 配置网络接口5: 启动服务总结在Debian 11（也称为Bullseye）下设置热点，你可以使用多种方法，但最常见和简单的方法之一是使用hostapd工具配合dnsmasq。这种方法不需要额外的…...

编程日记 2025/5/30 21:29:43

有铜半孔的设计规范与材料创新

设计关键参数孔径与间距限制最小孔径需≥0.6mm，孔边距≥0.5mm，避免铜层脱落；拼版时半孔区域需预留2mm间距防止撕裂。阻焊桥设计必须保留阻焊桥（宽度≥0.1mm），防止焊锡流入孔内造成短路。猎板的材料…...

编程日记 2025/5/31 12:26:47

机器学习知识体系：从“找规律”到“做决策”的全过程解析

你可能听说过“机器学习”，觉得它很神秘，像是让电脑自己学会做事。其实，机器学习的本质很简单：通过数据来自动建立规则，从而完成预测或决策任务。这篇文章将用通俗的语言为你梳理机器学习的知识体系，帮助…...

编程日记 2025/5/31 21:57:05

STM32之FreeRTOS移植（重点）

RTOS的基本概念实时操作系统（Real Time Operating System）的简称就叫做RTOS，是指具有实时性、能支持实时控制系统工作的操作系统，RTOS的首要任务就是调度所有可以利用的资源来完成实时控制任务的工作，其次才是提高工…...

编程日记 2025/5/31 21:27:29

做好测试用例设计工作的关键是什么？

测试用例设计是软件测试的核心环节，好的测试用例能高效发现缺陷，差的测试用例则可能漏测关键问题。结合多年测试经验，我认为做好测试用例设计的关键在于以下6点： 1. 深入理解需求（核心基础） ✅ 关键点：与产品经理/开发对齐，确保理解无偏差（避免“我以为”式测试）拆…...

编程日记 2025/5/31 3:07:28

R语言科研编程-标准偏差柱状图

生成随机数据在R中，可以使用rnorm()生成正态分布的随机数据，并模拟分组数据。以下代码生成3组（A、B、C）随机数据，每组包含10个样本： set.seed(123) # 确保可重复性 group_A <- rnorm(10, mean50, sd…...

编程日记 2025/5/31 14:32:39

未来教育考试答题软件4.0【自用链接备份】

未来教育考试答题软件4.0【自用链接备份】 http://www.downyi.com/downinfo/240413.html 补丁地址:https://www.wodown.com/soft/43108.html...

编程日记 2025/5/31 7:40:32

OpenGL Chan视频学习-11 Uniforms in OpenGL

bilibili视频链接： 【最好的OpenGL教程之一】https://www.bilibili.com/video/BV1MJ411u7Bc?p5&vd_source44b77bde056381262ee55e448b9b1973 函数网站： docs.gl 说明： 1.之后就不再单独整理网站具体函数了，网站直接翻译…...

编程日记 2025/5/31 9:58:20

Flink系列文章列表

把写的文章做一个汇总，会陆续更新的。 Flink流处理原理与实践：状态管理、窗口操作与容错机制-CSDN博客...

编程日记 2025/5/31 8:04:30

GitLab 从 17.10 到 18.0.1 的升级指南

本文分享从 GitLab 中文本 17.10.0 升级到 18.0.1 的完整过程。升级前提查看当前安装实例的版本。有多种方式可以查看： 方式一： /help页面可以直接在 /help页面查看当前实例的版本。以极狐GitLab SaaS 为例，在浏览器中输入 https://ji…...

编程日记 2025/5/30 14:28:32

产业集群间的专利合作关系

需要准备的文件： 全国的专利表目标集群间的企业名单根据专利的共同申请人，判断这两家企业之间存在专利合作关系。利用1_filter_patent.py，从全国的3000多万条专利信息中，筛选出与目标集群企业相关的专利。只要专利的申请人包…...

编程日记 2025/5/31 9:59:27

PyQt学习系列02-模型-视图架构与数据管理

PyQt学习系列笔记（Python Qt框架） 第二课：PyQt的模型-视图架构与数据管理一、模型-视图架构概述 1.1 什么是模型-视图架构？ 模型-视图（Model-View）是Qt框架中用于数据展示和交互的核心设计模式。它将数…...

编程日记 2025/5/31 5:09:04

redis主从复制架构安装与部署

redis主从复制架构安装与部署 1、Redis 一主两从架构的优势2、环境准备3、下载redis4、解压缩文件5、编辑配置文件6、创建数据目录并启动Redis7、检查主从状态8、 Redis Sentinel 模式 1、Redis 一主两从架构的优势 Redis 采用一主两从（1个主节点 2个从节点&#…...

编程日记 2025/5/31 6:35:25