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

webpack 题目

news 来源：原创 2025/7/17 21:09:30

文章目录

- webpack 中 chunkHash 和 contentHash 的区别
- loader和plugin的区别？
- webpack 处理 image 是用哪个 loader，限制 image 大小的是...；
- webpack 如何优化打包速度

webpack 中 chunkHash 和 contentHash 的区别

主要从四方面来讲一下区别：1、hash的生成依据；2、影响范围；3、用途；4、限制。以及我们如何使用

chunkHash：

生成依据：基于每个 chunk 的内容生成哈希值。
影响范围：同一个 chunk 内的所有模块发生变化时，chunkhash 会重新生成。
用途：适合用来区分不同的打包文件，比如入口文件（main.js）和依赖模块文件（vendor.js）。
限制：如果 chunk 中的非代码部分（比如引入的样式或其他模块）变化了，chunkhash 也会变化，不够精细。

output: {filename: '[name].[chunkhash].js',
},

场景问题：
假设你修改了项目中的 CSS 文件，但由于 CSS 和 JS 打包在同一个 chunk 中，chunkhash 会因为 CSS 的变化而导致 JS 文件的哈希值也发生变化，这可能会导致缓存失效。

contenthash

生成依据：基于具体文件内容生成哈希值。
影响范围：仅在内容本身发生变化时，contenthash 才会重新生成。
用途：适用于精细化缓存管理，特别是 CSS 和 JS 文件分离的场景。
优势：修改 CSS 不会影响 JS 文件的哈希值，反之亦然。

示例：

output: {filename: '[name].[contenthash].js',
},

场景优点：
假设你对 CSS 文件进行了修改，只有 CSS 文件的哈希值会更新，而 JS 文件的哈希值不会变动，这样用户浏览器可以继续使用缓存的 JS 文件。

如何选择：

开发模式：一般直接使用hash（全局简单哈希值，生成快）
生产模式：
- 使用chunkhash 来管理js文件缓存
- 使用contenthash来管理css和其他静态文件的缓存
- 借助 MiniCssExtractPlugin将css抽离，并使用contenthash防止js和css哈希混淆

Webpack 配置参考：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = {output: {filename: '[name].[chunkhash].js', // JS 使用 chunkhash},plugins: [new MiniCssExtractPlugin({filename: '[name].[contenthash].css', // CSS 使用 contenthash}),],
};

loader和plugin的区别？

webpack 处理 image 是用哪个 loader，限制 image 大小的是…；

在 Webpack 中，处理图片（image）通常使用 url-loader 或 file-loader，结合 asset 模式（Webpack 5 引入的新特性）更为常见。

图片处理 Loader

url-loader
- 用于将图片转为 Base64 编码的 Data URL 形式，嵌入到 JavaScript 文件中。
- 优点：小图片可内嵌，减少 HTTP 请求。
- 限制：较大的图片内嵌会增加打包文件体积。
file-loader
- 用于将图片作为文件输出，并返回对应的路径。
- 优点：适合较大的图片文件，不会嵌入到 JS 中。
- 限制：需要额外的 HTTP 请求。

Webpack 5 的 asset 模式

取代了传统的 url-loader 和 file-loader，统一处理静态资源。
提供两种自动选择方式：
- asset/resource：类似 file-loader，将文件输出为单独的文件。
- asset/inline：类似 url-loader，将文件内嵌为 Base64。
- asset：根据文件大小自动选择 resource 或 inline（默认阈值 8 KB）。
- asset/source：将文件内容作为字符串导入。

限制图片大小的配置
url-loader 示例
通过 limit 参数限制图片大小，超出限制的会作为文件处理，否则转为 Base64。

module.exports = {module: {rules: [{test: /\.(png|jpg|jpeg|gif|svg)$/i, // 处理图片文件use: [{loader: 'url-loader',options: {limit: 8192, // 限制大小为 8 KB，小于此值会转为 Base64name: '[name].[hash:8].[ext]', // 输出文件名outputPath: 'images', // 输出到 images 文件夹},},],},],},
};

Webpack 5 的 asset 模式
设置 asset 模式时，限制图片大小的方式是通过 parser.dataUrlCondition.maxSize 指定阈值（单位字节，默认 8 KB）。

module.exports = {module: {rules: [{test: /\.(png|jpg|jpeg|gif|svg)$/i, // 处理图片type: 'asset', // 根据大小自动选择 inline 或 resourceparser: {dataUrlCondition: {maxSize: 8192, // 超过 8 KB 则单独打包成文件},},generator: {filename: 'images/[name].[hash:8][ext]', // 输出路径和文件名},},],},
};

推荐使用
在 Webpack 5 中，建议直接使用 asset 模式，这样无需额外安装 url-loader 或 file-loader，而且配置更加简单灵活。
如果你有特殊的需求（比如区分非常小或非常大的文件处理方式），可以手动指定 type 为 asset/inline 或 asset/resource。

webpack 如何优化打包速度

减少文件搜索范围

优化 resolve 配置：
限制模块解析路径，减少解析时间。

resolve: {extensions: ['.js', '.jsx', '.json'], // 文件后缀范围alias: { '@': path.resolve(__dirname, 'src') }, // 路径别名modules: [path.resolve('node_modules')], // 仅在指定目录搜索模块
}

指定 include 和 exclude：
在 loader 中明确指定需要处理的范围。

module: {rules: [{test: /\.js$/,loader: 'babel-loader',include: path.resolve(__dirname, 'src'),exclude: /node_modules/,},],
},

缓存机制
开启持久化缓存：
Webpack 5 原生支持持久化缓存，能显著提升构建速度。

cache: {type: 'filesystem', // 使用文件缓存
},

Babel-loader 缓存：
配置 cacheDirectory 将 Babel 编译结果缓存到文件系统。

module: {rules: [{test: /\.js$/,loader: 'babel-loader',options: {cacheDirectory: true,},},],
},

多进程/多实例打包

thread-loader：
开启多线程处理，适合较重的 loader。

module: {rules: [{test: /\.js$/,use: ['thread-loader', 'babel-loader'],},],
},

压缩优化
TerserPlugin：
配置并行压缩，默认在生产模式下启用。

optimization: {minimize: true,minimizer: [new TerserPlugin({parallel: true, // 多线程压缩}),],
},

减少文件体积

按需加载：
通过动态 import 实现代码分割，减少初始加载文件的体积。
Tree Shaking：
移除无用代码，确保使用 ES Module。

复制代码
optimization: {usedExports: true, // 标记未使用的导出
},

开发模式下的优化
使用 source-map 的更快模式：
如 eval-source-map 或 cheap-module-source-map。

devtool: 'cheap-module-source-map',

使用 webpack-dev-server 提升本地开发效率：

devServer: {hot: true, // 热模块替换
},

减少构建体积
使用外部依赖 (externals)：
将第三方库从打包中排除，通过 CDN 引入。

externals: {react: 'React','react-dom': 'ReactDOM',
},

减少依赖包：
删除无用的依赖。
使用体积更小的包（如 lodash-es 替代 lodash）。

分析和监控
使用打包分析工具：
如 webpack-bundle-analyzer，找到体积较大的模块优化。

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugins: [new BundleAnalyzerPlugin(),
]

webpack 题目

文章目录 webpack 中 chunkHash 和 contentHash 的区别loader和plugin的区别？webpack 处理 image 是用哪个 loader，限制 image 大小的是...；webpack 如何优化打包速度 webpack 中 chunkHash 和 contentHash 的区别主要从四方面来讲一下区别&…...

编程日记 2025/7/17 21:09:30

Mysql - 存储引擎

一 MYSQL体系结构简介 MYSQL的体系结构可以分为四个层级，从上往下依次为： 1. 连接层: 最上层为客户端以及一些连接服务，包含连接操作，例如JAVA想要与MYSQL建立连接就需要用到JDBC，PHP语言与Python也可以连接到MYSQL&am…...

编程日记 2025/7/14 19:36:23

【实战教程】使用YOLOv8 OBB进行旋转框目标检测的数据集定义与训练【附源码】

《------往期经典推荐------》一、AI应用软件开发实战专栏【链接】项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…...

编程日记 2025/7/12 16:45:03

怎么实现邮件营销自动化？

邮件营销能够出色地帮助我们与客户建立良好关系。无论是新客户还是老客户，都可以通过邮件来达成较为良好的客户关系。然而，从消费者的角度来看，每个人都有自己独特的习惯和特点，没有人希望收到千篇一律、营销意味过重的邮件。因此…...

编程日记 2025/7/18 2:35:00

华为服务器使用U盘重装系统

一、准备工作下载官方系统（注意服务器CPU的架构是x86-64还是aarch64，不然可能报意想不到的错）制作启动U盘（下载rufus制作工具，注意文件系统选FAT32还是NTFS） 二、安装步骤将U盘插入USB接口重启服务器…...

编程日记 2025/7/17 13:05:44

空安全编程的典范：Java 8中的安全应用指南

文章目录一、Base64 编码解码1.1 基本的编码和解码1.2 URL 和文件名安全的编码解码器1.3 MIME Base64编码和解码二、Optional类三、Nashorn JavaScript 一、Base64 编码解码 1.1 基本的编码和解码 Base64 编码： 使用 Base64.getEncoder().encodeToString(origin…...

编程日记 2025/7/18 2:33:50

深入解析 Loss 减少方式：mean和sum的区别及其在大语言模型中的应用（中英双语）

深入解析 Loss 减少方式：mean 和 sum 的区别及其在大语言模型中的应用在训练大语言模型（Large Language Models, LLM）时，损失函数（Loss Function）的处理方式对模型的性能和优化过程有显著影响。本文以 re…...

编程日记 2025/7/18 2:31:32

opencv4.8 ubuntu20.04源码编译安装报错记录

-- IPPICV: Downloading ippicv_2021.8_lnx_intel64_20230330_general.tgz from https://raw.githubusercontent.com/opencv/opencv_3rdparty/1224f78da6684df04397ac0f40c961ed37f79ccb/ippicv/ippicv_2021.8_lnx_intel64_20230330_general.tgz make -j8 到这咋不动了代理配…...

编程日记 2025/7/18 2:10:48

16-03、JVM系列之：内存与垃圾回收篇(三)

JVM系列之：内存与垃圾回收篇(三) ##本篇内容概述： 1、执行引擎 2、StringTable 3、垃圾回收一、执行引擎 ##一、执行引擎概述如果想让一个java程序运行起来，执行引擎的任务就是将字节码指令解释/编译为对应平台上的本地机器指令才可以。简…...

编程日记 2025/7/17 14:45:52

在 Spring Boot 中使用 JPA（Java Persistence API）进行数据库操作

步骤 1: 添加依赖在 pom.xml 文件中添加相关依赖： <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId><…...

编程日记 2025/7/18 1:21:34

【sqlserver】mssql 批量加载数据文件 bulk copy使用

参考文章： Using bulk copy with the JDBC driver SqlServer数据批量写入 SqlServer批量插入数据方法–SqlBulkCopy sqlserver buld copy需要提供，数据文件的对应表的元数据信息主要的字段的位置、字段的名称、字段的数据类型。执行bulk load时候不一…...

编程日记 2025/7/17 2:10:41

卷积神经网络（CNN）的层次结构

卷积神经网络（CNN）是一种以其处理图像和视频数据的能力而闻名的深度学习模型，其基本结构通常包括以下几个层次，每个层次都有其特定的功能和作用： 1. 输入层（Input Layer）： 卷积神经网…...

编程日记 2025/7/15 16:53:58

使用Excel的COUNTIFS和SUMIFS函数进行高级数据分析

使用Excel的COUNTIFS和SUMIFS函数进行高级数据分析引言在处理数据时，Excel 提供了多种内置函数来帮助用户快速获取所需信息。其中，COUNTIFS 和 SUMIFS 是两个非常强大的多条件聚合函数，它们允许你根据一个或多个标准来统计或汇总数据。本…...

编程日记 2025/7/17 11:23:33

上传ssh公钥到目标服务器

创建密钥 ssh-keygen -t rsa -b 4096 -C "xxxx.xx"上传 sudo ssh-copy-id -i /Users/xx/.ssh/id_rsa.pub root127.0.0.1...

编程日记 2025/7/18 2:36:25

在visio2021 中插入MathType公式

首先要确保有着两个软件，且能用。 1、打开visio2021，之后点击“插入”-“对象” 2、打开后，选择MathType，确定 3、确定后就会弹出MathType编辑器...

编程日记 2025/7/18 2:20:06

【计算机视觉】图像的几何变换

最常见的几何变换有仿射变换和单应性变换两种，最常用的仿射变换有缩放、翻转、旋转、平移。 1. 缩放将图像放大或缩小会得到新的图像，但是多出的像素点如何实现----插值 1.1 插值方法最近邻插值双线性插值 cv2.resize() 是 OpenCV 中用于调整图像…...

编程日记 2025/7/15 22:57:50

IS-IS四

目录点到点中LSP(类似LSA）的同步过程注意LSP只有（1类LSA和2类LSA) 查看详细信息：display isis lsdb 0000.0000.0001.00-00 verbose 开摸： ISIS的伪节点LSP（类似LSA）没有路由信息 L1路由器的路由计算…...

编程日记 2025/7/18 2:30:23

CODA 离线安装及虚幻镜迁移

1、离线安装 1.1 下载Miniconda安装脚本 wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh1.2 添加权限 chmod x Miniconda3-latest-Linux-x86_64.sh1.3 执行安装 ./Miniconda3-latest-Linux-x86_64.sh遇到问题，一路回车即可 1.4 …...

编程日记 2025/7/18 2:09:46

【Rive】混合动画

1 混合动画简介【Rive】动画中介绍了 Rive 中动画的基础概念和一般动画的制作流程，本文将介绍混合动画的基础概念和一般制作流程。Unity 中混合动画介绍详见→ 【Unity3D】动画混合。混合动画是指同一时刻多个动画按照一定比例同时执行，这些动画控制的…...

编程日记 2025/7/18 2:23:55

软件体系结构复习-02 软件体系结构定位及构建

软件体系结构复习-02 软件体系结构定位及构建原文链接：《软件体系结构复习-02 软件体系结构定位及构建》目录软件体系结构复习-02 软件体系结构定位及构建 1 什么是软件体系结构 2 软件生命周期中的软件体系结构 2.1 生命周期 2.2 定位与作用 1 规划和需求…...

编程日记 2025/7/18 2:28:19

MySQL-SQL语句

文章目录一. SQL语句介绍二. SQL语句分类1. 数据定义语言：简称DDL(Data Definition Language)2. 数据操作语言：简称DML(Data Manipulation Language)3. 数据查询语言：简称DQL(Data Query Language)4. 数据控制语言：简称DCL(Data …...

编程日记 2025/7/15 19:05:07

Windows版Docker上不了网怎么办？

1、判断你的config文件、daemon文件的位置。 docker info命令输入， buildx: Docker Buildx (Docker Inc.) Version: v0.17.1-desktop.1 Path: C:\Users\AAA\.docker\cli-plugins\docker-buildx.exe 这个是你电脑这些文件的位置，修改linu…...

编程日记 2025/7/18 2:29:29

Zabbix监控Oracle 19c数据库完整配置指南

Zabbix监控Oracle 19c数据库完整配置指南本文将详细介绍如何使用Zabbix配置Oracle 19c数据库监控，包括安装、配置、问题排查等全过程。本指南适合新手独立完成配置。 1. 环境准备 1.1 系统要求 Oracle 19c数据库服务器Zabbix服务器（版本5.0或更高&a…...

编程日记 2025/7/18 2:15:00

解决 Maven 部署中的 Artifact 覆盖问题：实战经验分享20241204

🛠️ 解决 Maven 部署中的 Artifact 覆盖问题：实战经验分享 📌 引言在软件开发过程中，持续集成和持续部署（CI/CD）是提高开发效率和代码质量的关键手段。Hudson 和 Maven 是两种广泛使用的工具&#xff0…...

编程日记 2025/7/13 19:11:19

mb108里opengl相关

linux/linuxgdi.cpp里CreateWindowExW的 g_signal_connect(self->m_glArea, "render", G_CALLBACK(onRenderGlTextures), self); 绑定了一个渲染事件回调。另外有 g_signal_connect(self->m_glArea, "realize", G_CALLBACK(onRealizeGlTextures)…...

编程日记 2025/7/12 19:37:18

使用docker让项目持续开发和部署

大多人选择开发时在本地，部署时文件都在容器里，如果没有容器，那就本地开发，没有映射文件，如果部署环境到容器了，容器内部启动时设置执行命令，再将映射的文件进行编译，这就直接能实现…...

编程日记 2025/7/17 7:13:32

数据结构-查找

数据结构——二叉树先序、中序、后序及层次四种遍历（C语言版）_中序遍历-CSDN博客...

编程日记 2025/7/4 15:11:30

2030. gitLab A仓同步到B仓

文章目录 1 A 仓库备份到 B 仓库2 B 仓库修改main分支的权限 1 A 仓库备份到 B 仓库 #!/bin/bash# 定义变量 REPO_DIR"/home/xhome/opt/git_sync/zz_xx_xx" # 替换为你的本地库A的实际路径 REMOTE_ORIGIN"http://192.168.1.66:8181/zzkj_software/zz_xx_xx.…...

编程日记 2025/7/18 2:19:01

Ubuntu防火墙管理(五)——ufw源规则解读与修改

firewalld与nftables 在 /etc/firewalld/firewalld.conf 文件中，FirewallBackend 选项用于指定 Firewalld 使用的防火墙后端实现。具体来说： nftables：这是当前的默认选项，表示 Firewalld 将使用 nftables 作为防火墙后端。nftab…...

编程日记 2025/7/18 2:07:24

Flink+Paimon实时数据湖仓实践分享

随着 Paimon 近两年的推广普及，使用 FlinkPaimon 构建数据湖仓的实践也越来越多。在 Flink 实时数据开发中，对于依赖大量状态 state 的场景，如长周期的累加指标计算、回撤长历史数据并更新等，使用实时数仓作为中间存储来代替 Flin…...

编程日记 2025/7/18 1:36:28

全面解析DApp开发中的智能合约设计

在DApp的开发过程中，智能合约的设计起到了至关重要的作用。智能合约是运行在区块链上的程序，负责处理和执行DApp中的逻辑、交易和数据存储。下面我们将深入探讨智能合约的设计原则、挑战和优化方法，帮助开发者掌握如何设计高效、安全的智能合…...

编程日记 2025/7/14 9:34:41

强化学习新突破：情节记忆与奖励机制引领多智能体协作

简介本推文介绍了韩国科学技术院发表在人工智能顶会ICLR 2024上的论文《Efficient Episodic Memory Utilization of Cooperative Multi-Agent Reinforcement Learning》。该论文提出创新性高效情节记忆利用（Efficient Episodic Memory Utilization，EMU…...

编程日记 2025/7/16 1:40:57

VUE3学习二

教程视频【尚硅谷Vue3入门到实战，最新版vue3TypeScript前端开发教程】https://www.bilibili.com/video/BV1Za4y1r7KE?p67&vd_sourcef1bd3b5218c30adf0a002c8c937e0a27 零环境搭建学习环境 windows10node 18vue3 创建项目 npm create vuelatest 选项中…...

编程日记 2025/7/12 21:13:18

MySQL Group Replication

参考文档： https://dev.mysql.com/doc/refman/8.4/en/group-replication-configuring-instances.html MySQL版本： mysql> select version(); ----------- | version() | ----------- | 8.4.3 | ----------- 1 row in set (0.00 sec)mysql> …...

编程日记 2025/7/15 19:13:39

设计模式学习思路二

设计模式的学习思路_设计模式必须按顺序进行吗-CSDN博客以下是一些方法和思路可以帮助你更清晰地识别使用了哪种设计模式。 1. 确定模式时的思考步骤以下是分析代码时，你可以遵循的一些思路和步骤，帮助你识别可能使用的设计模式： a. 识别…...

编程日记 2025/7/15 22:31:38

MySql 笔记

drop database if exists school; create database school default charset utf8; -- 切换到数据库school use school; -- 创建学生表 drop table if exists tb_student; create table tb_student ( stuid int not null comment 学号, stuname varchar(20) not null comment 姓…...

编程日记 2025/7/12 10:57:17

【Qt】QTableView选中行发生变化时触发的信号

问题 QTableView选中的行发生变化时，使用的信号是QTableView的selectionModel()里的currentChanged信号，界面点击行来回切换，发现怎么也触发不了？ 原因信号槽连接放在了QTableView数据初始化前面，这时候QTableView…...

编程日记 2025/7/12 14:41:39

qt图像合成模式分析

文章目录定义含义示例分析CompositionMode_ClearCompositionMode_SourceCompositionMode_DestinationCompositionMode_SourceOverCompositionMode_DestinationOverCompositionMode_SourceInCompositionMode_DestinationInCompositionMode_SourceOutCompositionMode_Destinatio…...

编程日记 2025/7/16 1:58:23

http与https的区别

加密方式： 加密技术是对信息进行编码和解码的技术，编码是把原来可读信息（又称明文）译成代码形式（又称密文），其逆过程就是解码（解密），加密技术的要点是加密算…...

编程日记 2025/7/12 15:43:56

Pyside6 --Qt Designer--Qt设计师--了解+运行ui_demo_1.py

目录一、打开Qt设计师1.1 Terminal终端1.2 打开env，GUI虚拟环境下的scripts文件1.3 不常用文件介绍（Scripts下面） 二、了解Qt设计师的各个控件作用2.1 点击widget看看效果！2.2 点击Main Window看看效果三、编写一个简易的UI代码…...

编程日记 2025/7/17 19:57:09

11.17【大数据】Hadoop【DEBUG】

列出hdfs文件系统所有的目录和文件主节点上子结点是一样的 *为什么能登进 slave 02 的主机,但是 master 当中依然显示 slave 02 为 DeadNode?* hadoop坏死节点的重启_hadoop3 子节点重启-CSDN博客注意hadoop-daemon.sh 实际上位于 Hadoop 的 sbin 目录中，而不…...

编程日记 2025/7/13 21:00:26

MQ：kafka-消费者的三种语义

文章目录前言(一) 创建topic(二) 生产者（三）消费者1. At-most-once Kafka Consumer2. At-least-once kafka consumer3. 使用subscribe实现Exactly-once4. 使用assign实现Exactly-once 前言本文主要是以kafka 09的client为例子，详解kafka c…...

编程日记 2025/7/15 23:41:21

QT 线程锁

在 Qt 中，线程锁是用来同步多线程访问共享资源的机制，防止数据竞争和线程安全问题。Qt 提供了几种线程锁和同步工具，主要包括以下几种： 1. QMutex 功能：QMutex 是 Qt 中最常用的互斥锁（mutex）…...

编程日记 2025/7/16 15:36:03

C++中protobuf Message与JSON的互相转换

C中protobuf Message与JSON的互相转换环境： protobuf: v27.3(2024-08-01) abseil: 20240722.0文章目录 C中protobuf Message与JSON的互相转换前言1. 编写通讯录addressbook.proto2. 编译3. C中测试protobuf与json的转换4. 结果前言 PB转JSON：Protoc…...

编程日记 2025/7/14 20:07:02

Milvus向量数据库03-搜索理论

Milvus向量数据库03-搜索理论 1-ANN搜索通过 k-最近邻（kNN）搜索可以找到一个查询向量的 k 个最近向量。kNN 算法将查询向量与向量空间中的每个向量进行比较，直到出现 k 个完全匹配的结果。尽管 kNN 搜索可以确保准确性，但十分耗…...

编程日记 2025/7/15 19:21:21

qt QCryptographicHash详解

1、概述 QCryptographicHash是Qt框架中提供的一个类，用于实现加密散列函数，即哈希函数。哈希函数能够将任意长度的数据转换为固定长度的哈希值，也称为散列值或数据指纹。这个哈希值通常用于数据的完整性校验、密码存储等场景。QCryptographi…...

编程日记 2025/7/17 1:18:48

【论文阅读】具身人工智能（Embodied AI）综述：连接数字与物理世界的桥梁

摘要具身人工智能（Embodied AI）对于实现通用人工智能（AGI）至关重要，是连接数字世界与物理世界的各类应用的基础。近年来，多模态大模型（MLMs）和世界模型（WMs&#xff09…...

编程日记 2025/7/13 20:08:41

使用el-row和el-col混合table设计栅格化，实现表头自适应宽度，表格高度占位

演示效果： 如上图,由于地址信息很长,需要占多个格子,所以需要错开,若想实现这种混合效果,可以这样搭建: 页面效果： 代码分析: 上面使用el-row和el-col搭建表单显示第一排三个8,第二排8和16 下面混合table实现，并使用border来自适应宽度…...

编程日记 2025/7/14 1:38:55

MQ的基本概念

1 MQ的基本概念 RabbitMQ是一个开源的消息代理和队列服务器，它使用Erlang语言编写并运行在多种操作系统上，如Linux、Windows等。RabbitMQ可以接收、存储和转发消息（也称为“事件”）到连接的客户端。它适用于多种场景，…...

编程日记 2025/7/14 5:25:51

基于协同过滤的图书推荐系统爬虫分析可视化【源码+文档】

【1】系统介绍研究背景随着互联网的普及和电子商务的发展，用户可以在线获取大量的图书资源。然而，面对海量的信息，用户往往难以找到自己真正感兴趣的书籍。同时，对于在线书店或图书馆等提供图书服务的平台来说，如何…...

编程日记 2025/7/14 20:16:14

文章目录

webpack 中 chunkHash 和 contentHash 的区别

loader和plugin的区别？

webpack 处理 image 是用哪个 loader，限制 image 大小的是…；

webpack 如何优化打包速度

相关文章：