随笔分类 - 性能优化
摘要：📚 webpack v5 terser插件 文档 代码 // vue-cli是默认开启Terser的，webpack则需要手动开启 const TerserWebpackPlugin = require("terser-webpack-plugin"); module.exports = { //
阅读全文
摘要：大文件性能优化方向 参考文章 1 文件压缩 1.1 服务器端压缩： 1.2 客户端解压缩： 2 文件分割与懒加载 2.1 文件分割： 2.2 懒加载： 3 缓存策略 3.1 浏览器缓存： 3.2 缓存更新机制： 4 优化加载顺序 4.1 关键资源优先加载： 4.2 异步加载： 5 CDN 加速 5.
阅读全文
摘要：gzip 压缩 常见的压缩技术包括 gzip、Brotli (br) 和 Zstandard (zstd)。gzip兼容性最好，后文讲的都是gzip压缩。 gzip 是一种基于 LZ77 算法的通用数据压缩算法。它通过查找重复的字符串模式来减少数据冗余，从而实现压缩。 1 理解网络传输数值 在浏览器
阅读全文
摘要：const optimization = { /** * runtimeChunk可选值有：true或'multiple'或'single' * true或'multiple'会有每个入口对应的chunk。不过一般情况下 * 考虑到要模块初始化，设置为single就够多数情况下使用啦。 * 详情见官
阅读全文
摘要：tree shaking 树摇 Tree Shaking 指基于 ES Module 进行静态分析，通过 AST 将用不到的函数进行移除，从而减小打包体积。 1 前置知识 webpack 打包产物js文件夹下主要分为三个主要模块（css其实也同理） 打包工具将node_modules 里的三方库压缩
阅读全文
摘要：一、回流与重绘 1. 回流与重绘的概念及触发条件 （1）回流 当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时，浏览器会重新渲染部分或者全部文档的过程就称为回流。 下面这些操作会导致回流： 页面的首次渲染 浏览器的窗口大小发生变化 元素的内容发生变化 元素的尺寸或者位置发生变化 元素的字体大
阅读全文
