摘要: 📚 webpack v5 terser插件 文档 代码 // vue-cli是默认开启Terser的,webpack则需要手动开启 const TerserWebpackPlugin = require("terser-webpack-plugin"); module.exports = { // 阅读全文
posted @ 2025-01-24 16:16 wanglei1900 阅读(23) 评论(0) 推荐(0) 编辑
摘要: 大文件性能优化方向 参考文章 1 文件压缩 1.1 服务器端压缩: 1.2 客户端解压缩: 2 文件分割与懒加载 2.1 文件分割: 2.2 懒加载: 3 缓存策略 3.1 浏览器缓存: 3.2 缓存更新机制: 4 优化加载顺序 4.1 关键资源优先加载: 4.2 异步加载: 5 CDN 加速 5. 阅读全文
posted @ 2025-01-23 16:27 wanglei1900 阅读(9) 评论(0) 推荐(0) 编辑
摘要: gzip 压缩 常见的压缩技术包括 gzip、Brotli (br) 和 Zstandard (zstd)。gzip兼容性最好,后文讲的都是gzip压缩。 gzip 是一种基于 LZ77 算法的通用数据压缩算法。它通过查找重复的字符串模式来减少数据冗余,从而实现压缩。 1 理解网络传输数值 在浏览器 阅读全文
posted @ 2025-01-20 16:39 wanglei1900 阅读(33) 评论(0) 推荐(0) 编辑
摘要: 当图片的父容器设置的flex:1来撑满容器时,子元素如果切换图片会导致溢出父容器。将父容器设置为flex:auto; height:0; 为什么要添加height:0, 添加 height: 0 是为了确保父容器的高度为 0,然后使用 flex: auto 将父容器的高度撑开 阅读全文
posted @ 2024-12-30 14:25 wanglei1900 阅读(3) 评论(0) 推荐(0) 编辑
摘要: const optimization = { /** * runtimeChunk可选值有:true或'multiple'或'single' * true或'multiple'会有每个入口对应的chunk。不过一般情况下 * 考虑到要模块初始化,设置为single就够多数情况下使用啦。 * 详情见官 阅读全文
posted @ 2024-11-27 14:11 wanglei1900 阅读(13) 评论(0) 推荐(0) 编辑
摘要: tree shaking 树摇 Tree Shaking 指基于 ES Module 进行静态分析,通过 AST 将用不到的函数进行移除,从而减小打包体积。 1 前置知识 webpack 打包产物js文件夹下主要分为三个主要模块(css其实也同理) 打包工具将node_modules 里的三方库压缩 阅读全文
posted @ 2024-11-26 14:35 wanglei1900 阅读(41) 评论(0) 推荐(0) 编辑
摘要: open(url, target, features) open(url?: string | URL, target?: string, features?: string): WindowProxy | null; url 新url地址 或者 临时生成bolbUrl 预览 target 可选 _ 阅读全文
posted @ 2024-11-21 10:28 wanglei1900 阅读(33) 评论(0) 推荐(0) 编辑
摘要: 1 前置知识 用户直接与图表内容的交互(鼠标) 用户直接与图表组件的的交互(鼠标) 代码层面控制与图表的交互,外部区域的事件统一触发图表区域的事件或者自动执行图表行为 区分事件与行为,所有事件名称均小写 绑定事件通过实例的 on 和 off 方法,代码触发用 dispatchAction 需要更进阶 阅读全文
posted @ 2024-11-20 17:33 wanglei1900 阅读(122) 评论(0) 推荐(0) 编辑
摘要: 浏览器触发垃圾回收(GC)的时机通常是由其内部的垃圾回收机制自动决定的,这些机制旨在优化内存使用和性能。以下是一些常见的触发垃圾回收的时机: 内存使用达到阈值: 浏览器会设定一个内存使用的阈值,当应用程序或网页使用的内存达到或超过这个阈值时,浏览器可能会触发垃圾回收以释放不再使用的内存。 内存分配请 阅读全文
posted @ 2024-11-18 16:34 wanglei1900 阅读(67) 评论(0) 推荐(0) 编辑
摘要: MutationObserver应用于水印制作时,之所以能够有效防止用户篡改数据,主要归因于其对DOM(文档对象模型)元素变化的强大监视能力。以下是对此现象的详细解释: 一、MutationObserver的工作原理 MutationObserver是一个监视DOM变动的接口,它能够监听DOM树的变 阅读全文
posted @ 2024-11-18 16:31 wanglei1900 阅读(36) 评论(0) 推荐(0) 编辑
点击右上角即可分享
微信分享提示