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

vue打包优化,webpack的8大配置方案

vue-cli 生成的项目通常集成Webpack ,在打包的时候,需要webpack来做一些事情。这里我们希望它可以压缩代码体积,提高运行效率。

文章目录

    • (1)代码压缩:
    • (2)图片压缩:
    • (3)Tree-Shaking删除未使用代码:
    • (4)代码分割:
    • (5)懒加载:
    • (6)缓存策略:
    • (7)去除未使用的代码:
    • (8)按需加载字体和其他资源:

在这里插入图片描述

(1)代码压缩:

使用 Webpack 的压缩插件,如 UglifyJSPlugin 或 TerserPlugin,来压缩和优化 JavaScript 代码。示例代码:

const UglifyJSPlugin = require(‘uglifyjs-webpack-plugin’);

module.exports = {
plugins: [
new UglifyJSPlugin()
]
};
这将压缩和混淆 JavaScript 代码,减小文件大小。

(2)图片压缩:

对于图片资源,可以使用图像压缩工具或库,如 imagemin 或 svgo,在 Webpack 构建过程中自动压缩图片。示例代码(使用 imagemin-webpack-plugin):

const ImageminPlugin = require(‘imagemin-webpack-plugin’).default;

module.exports = {
plugins: [
new ImageminPlugin({
pngquant: {
quality: ‘65-80’
}
})
]
};
根据需要配置图片压缩的参数,如质量等。

(3)Tree-Shaking删除未使用代码:

启用 Tree-Shaking,删除未使用的代码和依赖。确保在模块导入时使用具体的导出名称,而不是通配符或默认导入。示例代码:

import { componentA } from ‘./componentA’;
而不是:
import * as componentA from ‘./componentA’;

(4)代码分割:

将代码分割成多个块,并按需加载,只加载当前页面需要的代码。使用 CommonsChunkPlugin 或 SplitChunksPlugin 来实现。示例代码(使用 CommonsChunkPlugin):

const CommonsChunkPlugin = require(‘webpack/lib/ CommonsChunkPlugin’);

module.exports = {
plugins: [
new CommonsChunkPlugin({
name: ‘vendors’,
minChunks: Infinity
})
]
};
将常用的库或第三方模块提取到一个单独的vendors 文件中。

(5)懒加载:

实现组件懒加载,只有在需要时才加载对应的组件。使用 Vue 的异步组件或 Webpack 的动态导入。示例代码(使用 Vue 的异步组件):

   <component :is="loadComponent()"></component>methods: {loadComponent() {return () => import('./componentB.vue');}}

在需要时动态加载组件 B。

(6)缓存策略:

利用 Webpack 的缓存机制,避免重复编译相同的代码。配置合适的缓存策略,如设置 cache-loader 或 hard-source-webpack-plugin。示例代码(使用 cache-loader):

module: {
rules: [
{
test: /.js$/,
use: ‘cache-loader’,
loader: ‘babel-loader’
}
]
}
使用 cache-loader 来缓存 Babel 编译的结果。

(7)去除未使用的代码:

使用 Webpack 的分析工具,如 webpack-bundle-analyzer,来分析包的内容,找出未使用的代码并进行清理。安装和运行 webpack-bundle-analyzer,查看构建结果的分析报告。

(8)按需加载字体和其他资源:

使用字体加载库,如 fontface-loader,或其他资源的按需加载库,避免一次性加载所有资源。

这些方案可以结合使用,根据项目的具体需求和情况进行调整。通过合理配置 Webpack,可以有效减小 Vue 项目打包文件的大小,提高应用的性能和加载速度。记得根据实际情况进行测试和优化,并根据项目的特定需求选择合适的方案。

相关文章:

vue打包优化,webpack的8大配置方案

vue-cli 生成的项目通常集成Webpack &#xff0c;在打包的时候&#xff0c;需要webpack来做一些事情。这里我们希望它可以压缩代码体积&#xff0c;提高运行效率。 文章目录 &#xff08;1&#xff09;代码压缩&#xff1a;&#xff08;2&#xff09;图片压缩&#xff1a;&…...

B端系统从0到1:有几步,其中需求分析要做啥?

一款B系统从无到有都经历了啥&#xff0c;而其中的需求分析又要做什么&#xff1f;贝格前端工场给老铁们做一下分析&#xff0c;文章写作不易&#xff0c;如果咱们有界面设计和前端开发需求&#xff0c;别忘了私信我呦&#xff0c;开始了。 一、B端系统从0到1都有哪些要走的步骤…...

django中查询优化

在Django中&#xff0c;查询优化是一个重要的主题&#xff0c;因为不正确的查询可能会导致性能问题&#xff0c;尤其是在处理大量数据时。以下是一些在Django中进行查询优化的建议&#xff1a; 一&#xff1a;使用select_related和prefetch_related: select_related用于优化一…...

【JavaScript】输入输出语法

目录 一、输出语法 二、输入语法 一、输出语法 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>D…...

多模态基础--- word Embedding

1 word Embedding 原始的单词编码方式&#xff1a; one-hot&#xff0c;维度太大&#xff0c;不同单词之间相互独立&#xff0c;没有远近关系区分。 wordclass&#xff0c;将同一类单词编码在一起&#xff0c;此时丢失了类别和类别间的相关信息&#xff0c;比如class1和class3…...

Mysql 日志

0 引言 MySQL日志主要分为4类&#xff0c;使用这些日志文件&#xff0c;可以查看MySQL内部发生的事情。这4类日志分别是&#xff1a; ● 错误日志&#xff1a;记录MySQL服务的启动、运行或停止MySQL服务时出现的问题。 ● 查询日志&#xff1a;记录建立的客户端连接和执行的…...

【开源】SpringBoot框架开发服装店库存管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 角色管理模块2.3 服装档案模块2.4 服装入库模块2.5 服装出库模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 角色表3.2.2 服装档案表3.2.3 服装入库表3.2.4 服装出库表 四、系统展示五、核心代码5.…...

云原生之容器编排实践-在K8S集群中使用Registry2搭建私有镜像仓库

背景 基于前面搭建的3节点 Kubernetes 集群&#xff0c;今天我们使用 Registry2 搭建私有镜像仓库&#xff0c;这在镜像安全性以及离线环境下运维等方面具有重要意义。 Note: 由于是测试环境&#xff0c;以下创建了一个 local-storage 的 StorageClass &#xff0c;并使用本地…...

标准IO 2月4日学习笔记

IO输入输出&#xff0c;操作对象是文件 Linux文件类型: b block 块设备文件 按块扫描设备信息的文件 存储设备 c character 字符设备文件 按字符扫描设备信息的文件 d direct…...

如何在1Panel上偷渡HTTP/3

本文 首发于 Anyeの小站&#xff0c;转载请取得作者同意。 前言 简介 HTTP/3 的基础即谷歌多年探索的基于 UDP 的 QUIC 协议。与 TCP 相比&#xff0c;使用 UDP 可以提供更大的灵活性&#xff0c;并且可以使 QUIC 完全于用户空间中实现——对协议实现的更新不像 TCP 那样需要绑…...

Qt实用技巧:QCustomPlot做北斗GPS显示绝对位置运动轨迹和相对位置运动轨迹图的时,使图按照输入点顺序连曲线

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/136131310 红胖子网络科技博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬…...

116 C++ 可变参数函数,initializer_list (初始化列表), 省略号形参

一 可变参数函数 有时候我们传递的参数是不固定的。 这种能接受非固定个数参数的函数就是可变参数函数 怎么实现呢&#xff1f;就要用到 initializer_list 标准库类型 该类型能够使用的前提条件是&#xff1a;所有的实参类型相同。 二&#xff0c;initializer_list(初始化列…...

强国有我社会实践公益活动在合肥市庐阳区开展

2月18日是开工第一天&#xff0c;阳光灿烂、春光明媚。合肥市四十五中2022级星辰&#xff08;5&#xff09;班部分同学在监护人的陪伴下来到庐阳区双岗街道万小店社区残疾人工作站&#xff0c;和工作站兄弟姐妹们共同开展“强国复兴有我”社会实践公益活动。合肥市庐阳区为民社…...

Nginx 正向代理、反向代理

文章目录 前言1. 正向代理1.1 概念1.2 逻辑图1.3 使用场景 2. 反向代理2.1 概念2.2 逻辑图2.3 使用场景 前言 正向代理主要是用来解决访问限制问题&#xff1b;反向代理则是提供负载均衡、安全防护等作用 1. 正向代理 1.1 概念 正向代理是一个位于客户端和目标服务器之间的代理…...

软考学习--计算机组成原理与体系结构

计算机组成原理与体系结构 数据的表示 进制转换 R 进制转换为 10 进制–按权展开法 10进制转换为2进制 原码 反码 补码 移码 原码 &#xff1a;数字的二进制表示反码 &#xff1a; 正数的反码等于原码&#xff0c;负数的反码等于原码取反补码&#xff1a; 正数的补码等…...

fish终端下conda activate失败

【问题】fish终端下激活conda环境报错&#xff1a; >> conda activate base CondaError: Run conda init before conda activate ## 然而运行 conda init fish 仍旧无法解决【解决】 参考&#xff1a;https://github.com/conda/conda/issues/11079 方法一&#xf…...

FPGA之移位寄存器

SLICEM中的LUT可以配置为32位移位寄存器,而无需使用slice中可用的触发器。以这种方式使用,每个LUT 可以将串 行数据延迟 1 到 32 个时钟周期。移入D &#xff08;DI1 LUT 引脚&#xff09;和移出 Q31&#xff08;MC31 LUT 引脚&#xff09;线路将LUT级联&#xff0c;以形成更大…...

Android Compose Material3 ModalNavigationDrawer 抽屉的使用(处理了一些坑)

Android Compose Material3 ModalNavigationDrawer 抽屉的使用&#xff08;处理了一些坑&#xff09; val drawerState rememberDrawerState(initialValue DrawerValue.Closed) val scope rememberCoroutineScope()ModalNavigationDrawer(drawerState drawerState,drawerC…...

golang select两个channel性能稳定,三个channel时性能会发生抖动,为什么?

golang select两个channel性能稳定&#xff0c;三个channel时性能会发生抖动&#xff0c;为什么&#xff1f; 答题思路 select —> 让 Goroutine同时等待多个 Channel 可读或者可写 —> Goroutine —> 调度器调度 —> 资源竞争 —> 不稳定、抖动 在 Go 中&#…...

VSCODE上使用python_Django

接上篇 https://blog.csdn.net/weixin_44741835/article/details/136135996?csdn_share_tail%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22136135996%22%2C%22source%22%3A%22weixin_44741835%22%7D VSCODE官网&#xff1a; Editing Python …...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

多云管理“拦路虎”:深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

Spring是如何解决Bean的循环依赖:三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...

短视频矩阵系统文案创作功能开发实践,定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

安宝特案例丨Vuzix AR智能眼镜集成专业软件,助力卢森堡医院药房转型,赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...

Ubuntu Cursor升级成v1.0

0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开&#xff0c;快捷键也不好用&#xff0c;当看到 Cursor 升级后&#xff0c;还是蛮高兴的 1. 下载 Cursor 下载地址&#xff1a;https://www.cursor.com/cn/downloads 点击下载 Linux (x64) &#xff0c;…...