项目性能优化UI库按需加载(打包)问题1. 问题剖析:当开发的项目需要引入第三方的UI组件库(antdmint-uielement-ui)的时, 需要会打包所有组件的js和css, 而项目中只使用了其中少部分组件. 使用按需打包实现只打包使用的组件, 从而减小打包文件大小1.2. 解决方案:下载bebel插件包: babel-plugin-component …
前端优化方法
简单来说，DNS 的作用是将域名解析为 IP 地址，解析的过程是耗时的，转化后会做本地缓存，我们的优化的目标主要是针对用户第一次访问站点的时候陷入长时间白屏的问题。DNS 解析可以分为两类，第一类是页面 DNS 解析，当用户输入 url 地址后（比如是第一次访问站点），便开始页面 DNS 解析，这个过程是省不了的，因为你无法在用户访问站点之前就让他提前把 D …
作为一名优秀的web前端人员，不懂响应式布局怎么可以呢？ 今天跟大家分享web前端开发和设计的干货。关于响应式布局的设计方法和响应式前端优化。我们都知道，目前主流的pc屏幕的分辨率都是1366*768、1440*900 、1280*1024等大屏的显示器。所以，我们设计的网页不能在按照1024的标准来设计或者是前端重构了。再加上现在移动互联网的趋势发展这么良 …
这篇文章我们来聊一聊静态资源的缓存策略，如果你准备去做页面的优化，那么这个知识点你就必须得了解。首先明确一下静态资源的概念，静态可以理解为不变的。页面中像js、css、img等文件都是静态文件，因为此类文件你上线什么内容，所有的用户都会获取一样的内容，它是不会变化的，基于这样的特点，这样的文件可以做缓存，提高加载速度。像一般的html文件，在你开发完还需要套 …
作者：addy（许斌），前端开发工程师，文艺青年一枚，写得了文章，编得了代码。作为开发，不仅仅是前端，优化总是你绕不开的事，我们的目标就是要产品变得更快。优化的对象不仅仅指产品本身，还有我们日常的开发流程。从加入团队到现在，大概有一半左右的时间花在了优化上，期间遇到了很多问题，回过头看，优化这件事情并不是那么简单，也是些很琐碎的事情，要打造一个无痛的开发流程 …
大家好，我是前端西瓜哥。今天带大家学习如何启用 gzip 来做前端性能优化。HTTP 上的 gzipgzip 是一种优秀的压缩算法，我们可以在 HTTP 请求上对一些文本文件，设置 gzip 压缩。服务端将响应头设置上 Content-Encoding: gzip，表示当前资源会使用 gzip 压缩，提示客户端解压使用。当然前提是客户端支持该压缩算法，服务端 …
先为 `src` 赋值成一个通用的预览图，下拉时候再动态赋值成正式的图片。`preview.png`是预览图片，比较小，加载很快，而且很多图片都共用这个`preview.png`，加载一次即可。待页面下拉，图片显示出来时，再去替换`src`为`data-realsrc`的值。<img src="preview.png" data-rea …
大家好，我是前端西瓜哥。今天带大家来学习如何做 React 性能优化。使用 React.memo()一个组件可以通过 React.memo 方法得到一个添加了缓存功能的新组件。const Comp = props => { }const MemorizedComp&nbs …
1. 代码优化代码压缩与混淆工具：使用工具如 webpack、Rollup、esbuild 来压缩和混淆代码，减小文件体积。配置：开启 TerserPlugin 或 babel-minify 进行压缩。减少冗余代码删除未使用的代码（Dead Code）。使用动态 import() 按需加载模块。避免重复加载第三方库。Tree Shaking去除未使用的模块， …
上一篇文章介绍的是《浏览器缓存机制》，浏览器缓存是浏览器保存数据用于快速读取或避免请求重复资源，提升网页加载速度。缓存的数据到底放哪了呢？作为开发者，有时也需要检查一下缓存中的内容。所以介绍下缓存方法以及缓存内容在哪查找？1、http 缓存http缓存是存在于服务器与浏览器之间，是一种保存资源副本并在下次请求时直接使用该副本的技术。web缓存发现请求资源已经 …