-
webpack-dev-server
一、webpack watch自动观测打包之前的开发效率很低下，因为我们每一次修改代码都需要npm runbundle。如果我们每一次的小改动都要经过npm runbundle，然后重新刷新页面，是一件非常麻烦的事。幸好webpack为我们提供了watch指令来让webpack自动观测到文件的变化，然后自动打包。虽然自动打包看上去很方便，但是我们的项目还是有不便之处，比如没有服务器（之前一直用的wampserver）的配合，不能自动打开页面，不能自动刷新页面等等。二、webpack-dev...…
-
Webpack 性能优化
Webpack 性能优化跟上技术的迭代无论是webpack的升级还是node、npm、yarn、之类的升级，内部肯定有考虑到性能优化的问题，所以跟上技术迭代无疑可以增加webpack的打包速度。在尽可能少的模块上应用loader有的模块能不用就不用，或者有一些根本就没必要用。比如babel-loader处理js文件，就可以excludes:/node_modules/。TIPS:并非所有Loader都是用excludes。Plugin尽可能的精简并确保可靠比如我们需要在生产环境下使用opt...…
-
在webpack中配置eslint
在webpack中配置eslint再开发中，有很多人的编辑器不能使用vscode中的eslint插件，也就不能明显的在编辑器中根据标记发现不规范的错误。他们只能通过命令行npx eslint src来查看错误，这是非让人恶心的一件事。虽然我们不能让没有eslint插件的编辑器显现错误，但是我们可以让eslint结合webpackDevServer来实现页面上的动态提示。第一步：下载eslint-loader第二步：将所有的.js文件打包前先使用eslint-loader来检测错误，此时如果...…
-
Webpack-merge混合配置文件
Webpack-merge混合配置文件一、dev配置和build配置以及common配置分离开发环境和生产环境的切换需要不断地修改webpack.config.js。为了方便，我们创建两个版本的配置文件，分别是生产环境下的配置文件和开发环境下的配置文件：webpack.dev.jswebpack.prod.js。在生产环境下可以取消或者更改很多开发环境下的配置。比如HRM、sourceMap…然后为了方便的应用配置文件，配置npm快捷脚本:我们发现，在webpack的两个环境的配置文件中依...…
-
Webpack TreeShaking
Webpack TreeShaking之前谈到的/babelrc的配置中，在”presets”属性下配置了一个转码规则\@babel/preset-env（如果还需要其他的转码规则，就需要安装其他的转码规则，并在这里进行配置，比如说”\@babel/preset-react”），给这个转码规则又配置了一个属性”useBuiltIns”:”usage”。表示我们只需要对文件中用到的ES6对象和方法进行补充即可，不需要将所有的对象和方法都不管用没用得到全都打包进去，这无疑会使我们的html文件...…
-
SplitChunksPlugin配置参数详解
SplitChunksPlugin配置参数详解SplitChunks的默认配置以下是常见的配置方式（按照官网的写法写了一遍）SplitChunks.chunks常用的取值有三个”async”（异步）,“all”（同步和异步）,”initial”（同步）。什么意思？异步就是只支持对异步引入的代码进行代码分割。同步的就是只对同步的代码进行代码分割。all就是无论怎样都进行代码分割。”async”是默认值，所以这也就是为什么在我们异步使用import()进行代码分割的时候可以不配置optimiz...…
-
Webpack Source Map
Webpack Source Map如果存在文件中的代码错误，控制台报错说打包后文件（这里是main.js）的哪一行出现了错误，而不是告诉我们真正的那个入口文件的哪一行出现了错误。这对我们的代码调试极其不便利。Content.js:控制台报错：如果希望映射出错误文件的具体位置。需要打开sourceMap功能。还有一点需要注意的是，在mode为开发环“development”时候，sourceMap功能是默认打开的。如果打开sourceMap功能：报错信息就会换成文件的映射：devtool也...…
-
数据协商
我们都知道，在http请求的请求头和消息头中会有一些值为MIME类型或者语言类型zh-CN等…设想一下两个人互相写信的情况，你希望另一个寄来一张照片，但是如果在信中不提及‘你应该把照片寄过来’这样的信息，那么另一个人是不容易知道你想要什么样的邮件。如果想要让回信方明确自己想要的是什么类型的回信，那就要在信中说好。在http请求中，发送的数据类型，和期望接受的数据类型有太多种，客户端为了能表示自己所期望的数据类型和一些其他的信息，就不得不在请求报文中提到。数据协商头信息 请求 ...…
-
Redirect 302、302重定向的实践方法
一、302状态码应用场景比如一个某个子路由下的内容已经临时搬迁，那么请求这个子路由我们还不希望直接404，这时候服务端只需要向浏览器返回302状态码，同时提供一个新的Location即可。此时浏览器就会自动的以这个新地址重新进行请求。或者说我们检测出某个用户未登录，我们希望跳转到登录页，就可以用同样的方式进行重定向至登录页。302实践小例子1、创建node代码302的语义是临时跳转到新的url下，并且浏览器接收到302响应后，会用location提供的新地址再次进行请求。直接访问8888端...…
-
HTTPS小结
因为HTTP是明文传输，是可以被别人恶意劫持http请求包，并篡改其中的数据的，相当于裸奔，危险性不言而喻。HTTPS为了解决这个问题，在HTTP协议基础上加上了SSL/TLS层。它能够防止我们的信息被窃取，同时及时的判断出不良网站。SSL层的目的 保证你是在跟真正的服务器通信,而不是伪装的服务器. 保证只有真正的服务器才能解密你发送的信息.同时,也只有你才能解密服务器跟你发送消息.就是保证是你跟真正的服务器在通信,这过程中没有第三者. 在这过程中,其他人还是可以...…
-
Vue源码分析-render
Vue源码分析——render&createElementmountComponent函数内部主要设定了观察者watcher和updateComponent回调，在updateComponenta回调中又主要执行了vm._render方法。那vm._render主要做了那些事情?答：其实vm._render主要的职责就是执行vm.render，然后在vm._render中调用render函数。最终render函数返回的是this.$createElement方法创建VNode的结果...…
-
Vue源码分析（一）从入口开始
Vue源码分析（一）从入口开始这一部分主要研究了import Vue from vue 的过程：Import Vue fromvue这一行代码无非就是引入Vue模块，而这个模块正是Vue这个全局对象。Vue的入口是在这里：src/platforms/web/entry-runtime-with-compiler.js在这个文件中，我们发现又引入了Vue说明Vue这个全局对象的初始化并不是一步到位，而是多个文件配合组成的。在当前的文件中，是为Vue绑定了一些诸如Vue.prototype.$...…
-
组件化——createComponent
组件化——createComponent我们都知道createElement是将带入的参数转换为对应的VNode，然后将VNode提供给vm._update()方法去将VNode转换为真实的DOM然后patch到页面上。在createElement函数中，第一个参数是html中存在的标签，可以创建出对应的VNode，如果第一个参数是组件，依旧可以创建出VNode。这是怎么做到的？答：首先来明晰一下createElement的使用场景：createElement就是为了创建VNode所用的函...…
-
组件更新（中）
对于新旧节点相同的情况是如何更新组件的？答：对于新旧节点相同的情况，我们是不需要对当前节点作出更新的，我们的关注点应该是他们的子节点。在经过sameVnode的判断后，进入patchVnode方法去更新当前节点的子节点。当前需要更新的父节点的种类大体上分两种，一种的普通的vnode，这类vnode一般就是普通的dom节点。另一种是组件vnode。对于普通的vnode父节点来说，我们需要做的是对他的子节点进行更新。他的子节点大概存在这4种情况： oldCh 与 ch 都存在且不相同...…
-
侦听属性
侦听属性Watch侦听属性是什么时候进行初始化的？答：和computed一样，也是在initState中进行初始化的，在initComputed之后执行的。这个过程在created生命周期之前。Watch侦听属性是如何进行初始化的？答：watch侦听属性的实现也是通过观察者模式实现的。watch侦听属性的watcher是一个userwatcher。watcher的初始化也是通过遍历watch选项，对每个watch项都通过调用createWatcher方法去进一步执行vm.$watch方法去...…
-
computed计算属性
computed计算属性computed的初始化时什么时候开始的？答：在执行new Vue时执行了vm._init()方法，在this._init中又执行了一系列初始化操作：然后执行initState，在initProps，initMethods和initData后执行了initComputed。二、为什么computed的初始化要在data和props之后进行？之所以要initComputed在后，是因为computed中的‘缓存功能’，只有当computed所依赖的变量发生改变时才会重...…
-
Vue源码分析——合并配置
Vue源码分析——合并配置问题1：我们都知道在执行Vue.prototype._init的时候，首先进行了合并配置，那他是怎么合并的？答： 要解决这个问题，还要回忆我们之前谈过的两种场景，一种是外部主动调用newVue的时候，另一种情况是在我们实例化自组建的时候内部调用的newVue。前者是直接通过mergeOptions方法，第二种是通过initInternalComponent。先分开来讨论，先看mergeOptions的情况。首先resolveConstructorOptions(v...…
-
white-space的使用
White-space的使用今天写项目的时候遇见了一个问题，感觉这个问题我以前遇到过而且很简单的就解决了，但是如今又碰到了这个问题却忘记了。当我们想要一个父元素的宽度固定时，里面的元素就会尽可能的占满一行，如果内容太多一行装不下就会自动换行，但是有些时候我们不希望换行，这时候我们就需要white-space这个属性了；我想要实现一个点击左右箭头可以滑动的时间轴。上面代码实现的效果是这样子的，注意white-space被注释了。呈现的效果如下:上图中，绿色边框是父元素，固定了宽高，里面的红色...…
-
onmouseover和onmouseenter的实验
时间长了，有点忘记onmouseenter和onmouseover的一些技术细节了，只记得一些关键的区别，就是他们对于子元素是否触发，之前有一段时间还特意研究过，这里重新做实验，算是拾遗。对应关系onmouseenter和onmouseleave对应onmouseover和onmouseout对应实验准备 Html + CSS + JSOnmouseenter首先是onmouseenter：控制台只打印了一次，说明onmouseenter是一个只被会父元素，而不会被其中的子元素触发。与o...…
-
css换行
参考博文：https://www.cnblogs.com/zhishaofei/p/4169622.html先说明一点：如果一个div的宽高固定。如果是CJK（中日韩亚洲字体）在碰到容器边界的时候就会自动换行。对于英文，在不特殊制定css属性的情况下，一个非常长的以至于超出边界的单词是不会自动折断的（连续的字母或者数字）。如果不是连续的，也就是是词组或者语句，那么默认规则是，每写入一个单词（连续的字母或者数字），就会看这一行后面的空格是否够下一个单词的长度使用，如果够了就继续在这行写入单词...…
