2021年03月_背太阳的牧羊人

原创 webpack的优化配置（四）——webpack的资源持久化缓存

利用webpack对我们的网络资源进行持久化的缓存，利用缓存可以提高用户度对我们网页再次访问时的体验，加快网页的加载速度。当项目上线时更新部署到服务器，资源的更新是有时间间隔的，也就是有先有后，此时用户去访问我们的资源的话就很容易出现问题。比如用户在这个时间间隔去访问时他那到的可能是最新的HTML，但是相关的资源却没有拿到，那浏览器很可能用的还是缓存的css和js，那用户访问最新的HTML和旧的代码逻辑及样式网站就无法正常访问到，所以管理好缓存很重要，不然很容易出现程序员常说的，这个项目在我电脑上访问挺好

2021-03-11 15:11:55 342

原创 webpack的优化配置（三）——webpack的资源压缩

Terser压缩jsmini-css-extract-plugin提取css，比如我们在react中写css，可能会把样式以对象的方式插在结构代码中，这个插件可以帮助把css提取出来到单独的css文件中，将打包后的css和js进行拆分。拆分前没有提取css：拆分后提取css到单独的文件：optimize-css-assets-webpack-plugin压缩css接着对提取的css进行压缩优化HtmlWebpackPlugin-minify压缩HTMLHtmlWebp..

2021-03-11 11:52:13 369

原创 webpack的优化配置（二）——webpack代码拆分

对于大型的webpack而言，如果把所有的东西都放在一个文件中打成一个包，这是十分低效的，也是不可接受的。webpack在默认情况下会把所有的文件都打包成一个文件（也就是一个包），代码拆分要做的就是把单个bundle文件拆分成若干个小bundles/chunks，这样可以缩短首屏的加载时间。手动定义多个入口splitChunks提取公有代码，拆分业务代码与第三方库将公有代码，业务代码和第三方库进行拆分是一个更有效的方式，业务代码随着需求的改动会有改动，但是第三方库我们几乎是不改变的，这样进行拆分后

2021-03-11 10:32:14 973

原创 webpack的优化配置（一）

webpack通过配置loader和plugin可以帮我们做很多不同的工作，但是比较头疼的是，记住很多的loader和plugin并不方便，所以webpack4之后就引入了新的概念，就是mode模式，通过配置官网约定的两个模式：开发模式和生产模式，这两个模式分别有默认配置好的插件供我们使用，我们不需要再为配置而发愁（convention over configuration也就是约定大于配置），如果模式中有些细微的东西在项目中不太合适，也可以overwrite重写里面的配置，但我们不需要大规模的从头到尾自己

2021-03-11 07:10:09 336

原创前端性能指标和优化目标——高频事件处理函数，防抖

有些事件触发频率非常的高，甚至超过帧的刷新速率，比如pc端的滚动事件，鼠标移动事件，移动端的touch事件，这些事件在一帧内会触发非常多次，会导致我们在一帧内对这些事件进行多次响应，这些事件的处理函数如果消耗比较高，那在一帧内任务就会比较重，但实际上在一帧内这些任务是没有必要处理多次的，比如滚动我们并不关系中间的过程，我只关心最后滚动到了哪里，之前多出来的那些滚动会造成额外的任务量，如果无法保证一帧在16ms内完成了，没有办法在16ms内完成就会造成页面卡顿，也就是页面抖动。一帧的生命周期（life o

2021-03-08 14:40:55 531

原创前端性能指标和优化目标——复合线程(compositor thread)与图层(layer)

复合是关键渲染路径中的最后一步，浏览器为了提高渲染的效率才有了复合，复合就是把页面拆解成不同的图层（类似Photoshop），当页面发生视觉变化时，可能只是影响了某一个图层其它图层不需要受到影响，此时我们可以把需要变化的元素单独创建一个图层。复合线程主要做了以下几点：将页面拆分多个图层进行绘制再进行复合，默认情况下如何拆分图层是由浏览器决定的，浏览器会根据规则来判断是否将页面拆分成多个图层以及把哪些元素拆分成单独的图层，它主要分析元素相互之间的影响，如果某个元素对其它元素影响非常的多，那这个元素就会被单独

2021-03-07 18:08:58 939

原创前端性能指标和优化目标——布局(layout) 与绘制(paint)

常用的性能测量API利用性能测量工具可以去模拟用户的使用场景进行性能分析和评估。这些有时候还不够，这就需要通过动态的测量，借助web提供的标准的api。web标准API：关键时间节点（Navigation Timing , Resource Timing）网络状态（Network API）客户端服务端协商（HTTP Client Hints）& 网页显示状态（UI API）现代浏览器网页渲染原理，关键渲染路径（critical rendering path），...

2021-03-06 16:22:51 2140

原创前端性能指标和优化目标

profiling就是性能分析的意思在性能评测中往往不要勾选Disabled cache，因为我们也要关系用户第二次访问页面时缓存有没有生效，这些缓存会帮助用户再次访问页面时提高访问的速度。Throttling网络吞吐自定义调整网络状态，模拟用户网络的情况，比如模拟4G，4G下载的速率大概在5M到12M左右，上传的速度大概在2M到5M。加载瀑布图资源首先经过排队才能从浏览器发出去，浏览器会对资源请求进行优先级的安排，它会把高优先级的资源先进行请求；每个资源会有一个域名，这个域名会被转换.

2021-03-05 18:05:06 551 1

原创 webpackShimming 预置依赖

为什么需要Shimming 预置依赖webpack compiler 能够识别遵循 ES2015 模块语法、CommonJS 或 AMD 规范编写的模块。然而，一些 third party(第三方库) 可能会引用一些全局依赖（例如 jQuery 中的 $）；或者有些 library 也可能会创建一些需要导出的全局变量.这些 “broken modules(不符合规范的模块)” 就是 shimming(预置依赖) 发挥作用的地方。shim 另外一个极其有用的使用场景就是：希望 polyfill 扩展浏览器

2021-03-03 14:17:19 225

陈开心的博客