- 博客(29)
- 收藏
- 关注
RSS订阅原创 webpack5 splitChunks分割代码
体会：optimization优化分离代码，重点是分离和修改基本信息，例如拆包和修改文件名，但不能修改模块引入方式，比如把同步变异步，把异步变同步，优化不能改变根本因素。optimization.splitChunks.cacheGroups相关配置也会作用于同步模块，但不会作用于异步模块。optimization.splitChunks.cacheGroups相关配置也会作用于异步模块，但不会作用于同步模块。注意 webpack5和webpack4有些默认属性有区别，文档要看清楚再自行测试。
2024-05-24 19:13:53
334
原创 浏览器解析简答
就是浏览器在构建DOM 的时候，占用了主线程，同时预加载扫码器也在将后台运行，他会扫 描整一个HTML文件 ，如果遇到 css、Javascript或者web字体 ，会在后台发起 资源请求并下载。CSS不会阻塞DOM解析，但是会阻塞DOM渲染，严谨一点则是CSS会阻塞render tree的生成，进而会阻塞DOM的渲染。注意：只是下载，尚未解析，主HTML解析器解析到资源标签script,css的时候解析。浏览器通过一个叫做预加载扫描器的二级HTML解析器，尽力缓解了载入资源时的阻塞问题。
2024-05-24 18:31:15
212
原创 popstate 的触发
而history.back() 、history.forward()、history.go()就是两条历史记录条目直接的跳转，所以会触发。也就是说，pushState和replaceState都是单一维度操作历史记录条目，只涉及一条历史记录条目，所以不会触发。代码中调用history.back() 、history.forward()、history.go()代码中调用pushState()、replaceState()在同一文档的两个历史记录条目之间导航会触发该事件，用户点击浏览器的前进、后退按钮。
2024-03-14 18:18:42
268
原创 是否可以在HTTP中缓存POST方法
答案是令人困惑的，包括缓存应该如何工作，缓存如何根据RFC工作，缓存应该如何根据RFC工作，以及缓存在实践中如何工作。需要注意的是，不同的浏览器和CDN可能有不同的URI长度限制，但是操作安全列表(查询白名单)作为面向外部的生产GraphQL应用程序的最佳实践，可以缩短URI。例如，您可以使用POST查询Elasticsearch或GraphQL，其中您的底层查询是幂等的。尽管RFC允许缓存对同一资源的请求，但实际上，浏览器和CDN不会实现此行为，也不允许您缓存POST请求。标头，以传达正文所代表的资源。
2024-03-07 15:58:42
827
原创 webpack编译报错Cannot find module ‘@babel/core‘且无法识别es6的reset语法
~ npm install babel-core babel-loader --save-dev 用了这个指令后webpack报错尝试重新下载了babel-core babel-loader 还是不行Cannot find module '@babel/core' babel-loader@8 requires Babel 7.x (the package '@babel/core'). I...
2024-03-07 15:54:54
477
1
原创 node_modules.cache是什么东西
cache文件的产生是由webpack4的插件cache-loader生成的，node_modules里下载了cache-loader插件，很多朋友都是vuecli工具生成的项目，内置了这部分设置，使用在配置文件例如vue.config里看不到这部分设置。此外，在 Webpack 4 中，部分插件是默认启用缓存功能的（例如压缩代码的 Terser 插件等），当然.cache文件下的4个插件其实也是默认启用了webpack的缓存功能。
2023-08-22 01:14:42
2019
原创 vue2Vue2响应式原理回顾
new Wachter(target, 'age', function update() { ... }) // 添加观察者，绿色箭头。data.age = 20 // 被观察者变更，通知观察者， 红色箭头。new Observer(data) // 数据劫持，黑色箭头。数据劫持结合观察者与发布者模式（伪代码）
2023-08-21 23:45:59
95
原创 JavaScript如何执行语句
tip：关于GO对象和AO对象，它们俩是一个种链式关系，就拿上面的这个例子来说吧，如果在函数体的内部没有定义global变量，这也意味着AO对象中将有这个global这个属性。那如果没有会怎么办？首先JavaScript的执行过程会先扫描一下整体语法语句，如果存在逻辑错误或者语法错误，那么直接报错，程序停止执行，没有错误的话，开始从上到下解释一行执行一行。下面这个函数里面只有一个连等的操作，赋值操作都是自右向左的，而b是未经声明的变量，所以它是归window的，我们可以直接使用window.b去使用它。
2023-08-14 17:14:07
332
原创 为什么vue3 watch不能直接监听对象属性值
显然watch得到是一个name的值，它是无法从一个name推导到person这个对象的，如果实现，就导致car的name和person的name一起监听了，没必要，所以不会这样实现。2. 这也是为了vue3里实现的proxy代理方案，它要利用Proxy的getter属性收集effect依赖。1.因为不能确定是哪个对象的值，假如多个监听对象有相同的值，这样产生不必要的歧义和麻烦。
2023-08-12 18:40:23
837
原创 vue中函数为什么不能在异步操作里return出数据
一直有这疑惑，后在思索异步事件机制的时候略有体会，、这就涉及到主线程，支线程又名任务队列，而这任务队列有两大分支宏任务和微任务，关于主线程与支线程的关系请看我另一篇文章先看一个例子为什么没有返回10，且听我细细道来~首先，函数是作为一个执行操作，执行它里面后续加入含有异步操作，但是，但是--》》编译器进入函数时是同步的，进入函数到打印出 ‘我是同步’ ，这个过程都还是同步在主线程执行的遇到setTimeout的时候，认定为异步操作就得把这段代码放到任务队列中执行，看直观图..
2020-05-28 19:24:24
3830
1
转载 强制缓存和协商缓存的区别
什么是浏览器缓存浏览器缓存(Brower Caching)是浏览器在本地磁盘对用户最近请求过的文档进行存储，当访问者再次访问同一页面时，浏览器就可以直接从本地磁盘加载文档。浏览器缓存的优点有：1.减少了冗余的数据传输，节省了网费2.减少了服务器的负担，大大提升了网站的性能3.加快了客户端加载网页的速度通过复用以前获取的资源，可以显着提高网站和应用程序的性能。Web 缓存减少了等待时间和网络流量，因此减少了显示资源表示形式所需的时间。通过使用 HTTP缓存，变得更加响应性。浏览.
2020-05-28 18:41:24
2138
原创 postcss-px2rem-exclude配置 postcss.config.js无效
之前做移动端的时候，网上搜索px转rem的插件发现postcss-px2rem-exclude挺好用，只要配置下postcss.config.js就行module.exports = { 'plugins': { 'postcss-px2rem-exclude': { remUnit: 75, exclude: /node_modules|folder_name/i } }}发现没有效果，然后然后百度网上资料发现发现。。。需要注意的是：上述
2020-05-25 16:34:30
5017
1
原创 vue中v-for的key作用和绑定
key的作用是给dom节点标志唯一值，让vue里的diff算法能快速找到dom节点从而以最少的更新来提高性能，为什么不提倡用index下标绑定key呢，因为，用下标绑定key,那么假如数组在头部压入一个对象，那数组里的每一项的下标就全部加一，就相当于全部发生变化，这样vue里的diff算法就会更新全部的dom节点，这样会造成性能消耗，能不用下标就不用下标...
2020-05-22 02:04:56
796
原创 再探computed和methods方法以及watch之间的区别
计算属性缓存 vs 方法之前没想明白computed和methodsd的区别，下面是官网原话，关键在标红处你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果：<p>Reversed message: "{{ reversedMessage() }}"</p>// 在组件中methods: { reversedMessage: function () { return this.message.split('').reverse().joi
2020-05-22 01:58:49
297
原创 重温正则表达式，转义字符的自我剖析
首先咔给乡亲们推荐一波gitlab正则表达式学习网址，学习正则表达式的简单方法，这是在github两万多星的项目，不是内容很高深，而是很通俗易懂，很实用，里面附带正则验算网站下面说说我的新的体会元字符都不难理解，唯手熟尔，然后我一直曾经一直不甚明白的一个就是转义字符 \，转义转义，转换含义，网上很多教程一些博客都比较官方或者一带而过，我必须站出来伸张正义了，首先，转义字符转的是谁，字符还是数字还是文字，转义字符不是转数字也不是转文字，转的是特殊字符不要嫌啰嗦，只是为了以后回顾能更顺畅什.
2020-05-20 20:33:41
219
转载 JavaScript之对象序列化详解
最近在想着js序列化，看到一篇不错的文章，特地推荐下世间万物，都有其存在的原因。为什么会有对象序列化呢？因为程序猿们需要它。既然是对象序列化，那我们就先从一个对象说起：var obj = {x:1, y:2}; 当这句代码运行时，对象obj的内容会存储在一块内存中，而obj本身存储的只是这块内存的地址的映射而已。简单的说，对象obj就是我们的程序在电脑通电时在内存中维护的一种东西...
2020-03-09 23:32:35
251
转载 Vue中的data和computed是在生命周期的执行顺序的探究
先讲述我遇到的情况，我在computed引入了vuex的一个变量getName，由于在页面上多地方共用，因此我在data处将他赋值给timer,发现打印出来是undefine废话不多，先咔的撸出代码先在页面引入然后在页面敲出来出现这种情况初步猜测是data和computed初始化顺序的问题了，猜测在vue生命周期中data初始化是在computed初始化之前，所以获取不到 co...
2019-12-15 18:20:04
5688
原创 git报错：Permission denied (publickey)
今天安装了git,对接公司自己的gitlab地址，（注意这里的gitlab是公司内网地址，映射的域名也是内网域名 -- 这是关键，也是后面bug解决的所在）ssh-key复制了许多遍一直链接不上gitlab,一直报Permission denied (publickey)试了网上了解决方法毛卵用，估计个人bug场景不同以为是公钥的问题，删除公钥重新创建也是无效，我干脆一波在git ...
2019-10-21 14:46:08
292
原创 ant design vue 表单域的validateFields取值和子item的change取值的先后问题
废话不多，先咔的撸出代码先我先在created中初始化表单域form然后在表单域子节点中绑定@change="handleChange"函数，然后我设想是每一次单选完后打印出单选后的值然而结果是每次打印的值是单选前的值，比如：我开始时默认选正常，第一次选异常，打印出正常第二次选正常，结果打印出异常我懵逼了，一般出现这种情况应该是跟事件机制同步或者异步的...
2019-09-21 16:28:00
9186
原创 ${} es6模板字符串插变量
搞项目时偶尔遇到${}这种语法，细究之下原来是ES6引入的模板字符串简单地说就是在字符串中插入变量，如下注意不是双引号或单引号，而是反引号 (` `)号正确写法就是：console.log( ` name : ${name} , age : ${age} , gender : ${gender} ` )...
2019-09-15 03:49:20
2654
原创 初探vue.use和vue.prototype的区别
首先，明确一点，不是为了vue写的插件(插件内要处理)不支持Vue.use()加载方式 非vue官方库不支持new Vue()方式 每一个vue组件都是Vue的实例，所以组件内this可以拿到Vue.prototype上添加的属性和方法。 可能网上说的比较概念化，其实主要是插件内源码编写的内容方式不一样，用Vue.use全局注册的插件，必须含有install方法，vue.use()通过...
2019-06-24 03:50:06
2027
转载 require加载文件或者文件夹规则
使用require来加载文件时可以省略扩展名。比如require('./module')，则对应的加载顺序为，按js文件来执行（先找对应路径当中的module.js文件来加载） 按json文件来解析（若上面的js文件找不到时，则找对应路径当中的module.json文件来加载） 按照预编译好的c++模块来执行（寻找对应路径当中的module.node文件来加载） 若参数字符串为一个目录（...
2019-06-20 23:25:26
3754
转载 import/require遐想
import 和require的区别，import 和js的发展历史息息相关，历史上 js没有模块(module)体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。 在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 Co...
2019-06-17 02:24:40
175
转载 js相对路径
dist 相对路径let a = path.resolve(__dirname,'dist');console.log('a',a);// a E:\graduationproject\myapp\dist/dist 绝对路径let b = path.resolve(__dirname,'/dist');console.log('b',b);// b E:\dist./di...
2019-04-28 01:49:21
164
原创 file-loader打包图片
项目结构如图：一开始我没有设置option,直接打包图片webpack打包后，图片不能显示404，检测发现输出路径不对http://127.0.0.1/webpack1/d378ab56f10a6327856c18762306c62a.jpg正确路径应该为http://127.0.0.1/webpack1/dist/d378ab56f10a6327856c18762306c62...
2019-04-25 19:33:36
414
原创 v-on:click="greet"和v-on:click="greet()"传入参数的区别
先上测试源码；首先清楚---基于浏览器兼容性，火狐浏览器没有内置event事件对象，chrome和IE基本都实现了内置event事件对象；首先可以用函数内置对象arguments判断出来不同；当v-on:click="greet"不带括号时，arguments对象存储的是`event` 原生 DOM 事件对象参数当v-on:click="greet"带括号时，a...
2019-03-26 18:34:35
1061
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人