
获得徽章 8
- #每天一个知识点# Webpack 的热更新原理
Webpack 的热更新又称热替换(Hot Module Replacement),缩写为 HMR。 这个机制可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块。
HMR的核心就是客户端从服务端拉去更新后的文件,准确的说是 chunk diff (chunk 需要更新的部分),实际上 WDS 与浏览器之间维护了一个 Websocket,当本地资源发生变化时,WDS 会向浏览器推送更新,并带上构建时的 hash,让客户端与上一次资源进行对比。客户端对比出差异后会向 WDS 发起 Ajax 请求来获取更改内容(文件列表、hash),这样客户端就可以再借助这些信息继续向 WDS 发起 jsonp 请求获取该chunk的增量更新。
后续的部分(拿到增量更新之后如何处理?哪些状态该保留?哪些又需要更新?)由 HotModulePlugin 来完成,提供了相关 API 以供开发者针对自身场景进行处理,像react-hot-loader 和 vue-loader 都是借助这些 API 实现 HMR。展开赞过评论2 - #每天一个知识点# es6字符串新增方法
字符串查找:
str.indexOf(要找的东西) 返回索引(位置) ,没找到返回-1
str.includes(要找的东西) 返回值 true/false
判断浏览器: includes
www.xxx.xx
字符串是否以谁开头:
str.startsWith(检测东西)
检测地址
字符串是否以谁结尾:
str.endsWith(检测东西)
.png
重复字符串:
str.repeat(次数);
填充字符串:
str.padStart(整个字符串长度, 填充东西) 往前填充
str.padEnd(整个字符串长度, 填充东西) 往后填充
str.padStart(str.length+padStr.length, padStr)展开等人赞过410 - #每天一个知识点# import和export,CommonJS 中的 require/exports 和 ES6 中的 import/export 区别?
1、CommonJS模块输出的是一个值的拷贝,一旦输出一个值,模块内部的变化就影响不到这个值。
2、CommonJS模块是运行时加载,ES6模块是编译时输出接口(ES6可以在编译时就完成模块加载,效率要比CommonJS模块的加载方式高)。
3、ES6模块是通用的,同一个模块不用修改,就可以用在浏览器
4、require/exports是CommonJS在Node中实现的。
5、ES6模块的设计思想,是尽量静态化,使得编译时就能确定模块的依赖关系以及输入和输出的变量。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。展开评论点赞