前端框架:vue-cli-service使用中遇到的问题 npm run build -- --report
vue-cli3执行打包命令时候的–report参数无效项目里的scripts脚本
123scripts: { "build": "vue-cli-service build && npm run test",}
npm 执行打包命令的时候 npm run build –report 却没有生成我想要的webpack-bundle-analyzer 分析报告,官网里明确写了支持的
1--report 和 --report-json 会根据构建统计生成报告,它会帮助你分析包中包含的模块们的大小
vue-cli-service build刚开始找不到方向直到有一天看到大佬的文章才明白,(后面得学习从源码的角度思考问题)找到打包命令的文件,打印args入参看下
12345678910111213141516171819// node_modules\@vue\cli-service\lib\commands\build\index.js console.log(args, '——————args') if (args.report || args['re ...
算法基础: esay level
二分查找给定一个 n 个元素有序的(升序)整型数组 nums 和一个目标值 target ,写一个函数搜索 nums 中的 target,如果目标值存在返回下标,否则返回 -1。
来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/binary-search著作权归领扣网络所有。商业转载请联系官方授权,非商业转载请注明出处。示例输入: nums = [-1,0,3,5,9,12], target = 9输出: 4解释: 9 出现在 nums 中并且下标为 4
123456789101112131415function search(nums: number[], target: number): number { let max = nums.length - 1 let min = 0 while(max >= min) { if (nums[max] === target) { return max } ...
网络基础: tcp/udp/http
计算机网络体系结构
OSI参考模型OSI(Open System Interconnect),即开放式系统互联。一般都叫OSI参考模型,是ISO(国际标准化组织)组织在1985年研究的网络互连模型。ISO为了更好的使网络应用更为普及,推出了OSI参考模型,这样所有的公司都按照统一的标准来指定自己的网络,就可以互通互联了。OSI定义了网络互连的七层框架(物理层、数据链路层、网络层、传输层、会话层、表示层、应用层)。
TCP/IP四层协议(数据链路层、网络层、传输层、应用层)
应用层应用层最靠近用户的一层,是为计算机用户提供应用接口,也为用户直接提供各种网络服务。我们常见应用层的网络服务协议有:HTTP,HTTPS,FTP,TELNET等。
传输层建立了主机端到端的链接,传输层的作用是为上层协议提供端到端的可靠和透明的数据传输服务,包括处理差错控制和流量控制等问题。我们通常说的,TCP UDP就是在这一层。端口号既是这里的“端”。
网络层本层通过IP寻址来建立两个节点之间的连接。就是通常说的IP层。这一层就是我们经常说的IP协议层。IP协议是Internet的基础。
数据链路层通过一些规 ...
chrome: 并行配置不正确导致无法启动
启动chrome.exe突然提示: 应用程序无法打开,因为应用查询的并行配置错误,然后上网百度了下,记录了下,三个步骤
右击自己的chrome快捷键,找到chrome的安装位置然后会看到两个ip地址类型的文件夹,找到两个文件夹的区别,然后把一个少manifest的文件从另一个ip地址的文件夹拷贝过去,并改成 当前ip地址的文件名
编辑下文件mainfest,里面涉及到的ip地址也对应改下即可
垃圾回收机制: 标记清除和引用计数
像C语言这样的底层语言一般都有底层的内存管理接口,比如 malloc()和free()用于分配内存和释放内存。而对于JavaScript来说,会在创建变量(对象,字符串等)时分配内存,并且在不再使用它们时“自动”释放内存,这个自动释放内存的过程称为垃圾回收。因为自动垃圾回收机制的存在,让大多Javascript开发者感觉他们可以不关心内存管理,所以会在一些情况下导致内存泄漏。
JavaScript垃圾回收的机制很简单:找出不再使用的变量,然后释放掉其占用的内存,但是这个过程不是时时的,因为其开销比较大,所以垃圾回收器会按照固定的时间间隔周期性的执行。
内存生命周期JS 环境中分配的内存有如下声明周期:内存分配:当我们申明变量、函数、对象的时候,系统会自动为他们分配内存内存使用:即读写内存,也就是使用变量、函数等内存回收:使用完毕,由垃圾回收机制自动回收不再使用的内存
JS 的内存分配JavaScript 在定义变量时就完成了内存分配。
12345678910111213141516171819var n = 123; // 给数值变量分配内存var s = "azerty"; // 给 ...
工具进阶: 初识webpack原理
目前本文介绍的是webpack的打包原理,还会有涉及到的
webpack 构建流程(编译原理?)是怎样的?(本文)
webpack loader 和 plugin 的原理和区别?(更新中)
plugin 中有异步请求会阻塞后面的 plugin 吗?
webpack 热更新原理?
你webpack 是怎么做拆包(分包)的?
做过webpack 性能优化吗?
webpack是高度复杂抽象的插件集合,理解webpack的运行机制,对于我们日常定位构建错误以及写一些插件处理构建任务有很大的帮助。webpack 的作用是根据入口文件将源代码编译(构建、打包)成最终代码。中间经过webpack打包,打包的过程就是编译
核心打包原理主要流程 初始化 -> 编译 -> 输出
初始化这个阶段,webpack会将CLI参数、配置文件、默认配置进行融合,形成一个最终的配置对象
编译阶段,1.创建chunk 2.构建所有依赖模块 3.产生 chunk assets 4.合并 chunk assets,
输出阶段,利用node模块里的fs模块,根据编译产生总的asset以及结合output输 ...
前端框架Vue: 面试相关1
Vue响应式原理computed实现原理$nextTick原理(Vue的数据为什么频繁变化但只会更新一次)
virtual Dom 实现原理Vue 生命周期过程参考链接-2021年前端面试必读文章【超三百篇文章/赠复习导图】
前端基础: 网络-1
HttpsHTTPS是在HTTP上建立SSL加密层,并对传输数据进行加密,是HTTP协议的安全版。现在它被广泛用于万维网上安全敏感的通讯,例如交易支付方面。HTTPS主要作用是:(1)对数据进行加密,并建立一个信息安全通道,来保证传输过程中的数据安全;(2)对网站服务器进行真实身份认证。
http存在的问题
通信使用明文,内容可能被窃听
无法证明报文的完整性,所以可能遭篡改
不验证通信方的身份,因此有可能遭遇伪装
反观Https,相比http多了一下优势
数据隐私性:内容经过对称加密,每个连接生成一个唯一的加密密钥
数据完整性:内容传输经过完整性校验
身份认证:第三方无法伪造服务端(客户端)身份
HTTPS如何解决HTTP上述问题?在采用SSL后,HTTP就拥有了HTTPS的加密、证书和完整性保护这些功能。也就是说HTTP加上加密处理和认证以及完整性保护后即是HTTPS。1.解决内容可能被窃听的问题——加密 方法3.对称加密+非对称加密(HTTPS采用这种方式)2.解决报文可能遭篡改问题——数字签名3.解决通信方身份可能被伪装的问题——数字证书
https工作流程1.Client ...
基础-前端重学-7
事件冒泡和事件捕获事件冒泡和事件捕获的区别 123<div id="outer"> <p id="inner">Click me!</p></div>
事件冒泡: 事件从最内层的元素开始,一直向上传播,直到document。则在事件冒泡的概念上,应该是p -> div -> body -> html -> document 事件捕获: 与事件冒泡相反,从最外层开始,直到具体元素
1element.addEventListener(event, function, useCapture)
第一个参数是需要绑定的元素 第二个参数是触发事件后要执行的函数 第三个元素就是为事件冒泡还是捕获准备的 默认是false,表示在事件冒泡阶段处理函数, true 则表示在事件捕获阶段处理函数
addEventListener方法用来为一个特定的元素绑定一个事件处理函数,
事件冒泡与事件捕获应用: 在实际开发中,利用事件流的特性,事件代理 123456789<ul class="color_li ...
基础: 重新认识this
执行上下文当 JavaScript 代码执行一段可执行代码(executable code)时,会创建对应的执行上下文(execution context)。
可执行代码这就要说到 JavaScript 的可执行代码(executable code)的类型有哪些了?其实很简单,就三种,全局代码、函数代码、eval代码。举个例子,当执行到一个函数的时候,就会进行准备工作,这里的“准备工作”,让我们用个更专业一点的说法,就叫做”执行上下文(execution contexts)”。
对于每个执行上下文,都有三个重要属性:
变量对象(Variable object,VO)
作用域链(Scope chain)
this
执行上下文的创建阶段,会分别生成变量对象,建立作用域链,确定this指向,谨记this的指向,是在函数被调用的时候确定的。也就是执行上下文被创建时确定的。且在函数执行过程中,this一旦被确定,就不可更改了
this 并不是取决于他所在的位置,而是取决于他所在的Function是如何调用的构造函数中的 this ,就是指向即将实例化的那个对象。谨记!
全局上下文在全局执行上 ...