LeBronChao's Blog

写作不易，未经作者允许禁止以任何形式转载！如果觉得文章不错，欢迎关注、点赞和分享！掘金原文链接 认识 Plugin Loader 是用于特定的模块类型进行转换; Plugin 可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等; 常用 Plugin CleanWebpackPlugin 每次修改了一些配置，重新打包时，都需要手动删除 dist 文件夹: 我们可以借助于一个插件来帮助我们完成，这个插件就是 CleanWebpackPlugin; 安装： npm install clean-webpack-plugin --save 配置： const { CleanWebpackPlugin } = require("clean-webpack-plugin");module.exports = { entry: "./src/js/main.js", output: { filename: "bundle.js", path ...

写作不易，未经作者允许禁止以任何形式转载！如果觉得文章不错，欢迎关注、点赞和分享！ 认识 Loader Loader 可以用于对模块的源代码进行转换； 在加载这个模块时，webpack 其实并不知道如何对其进行加载，我们必须定制对应的 loader 来完成这个功能。 loader 配置方式 内联方式：import "css-loader!../css/index.css"; loader 和文件路径用！分隔 配置方式：webpack.config.js 配置方式表示的意思是在我们的 webpack.config.js 文件中写明配置信息 module.rules 中允许我们配置多个 loader（因为我们也会继续使用其他 Loader，来完成其他文件的加载） 这种方式可以更好地标识 loader 配置，也方便后期的维护，同时也让你对各个 Loader 有一个全局的概览； module.rules 的配置如下 rules 属性对应的值是一个数组：[Rule] 数组中存放的是一个个 Rule，Rule 是一个对象，对象中可以设置多个属 ...

写作不易，未经作者允许禁止以任何形式转载！ 如果觉得文章不错，欢迎关注、点赞和分享！ Webpack 初体验 用 Webpack 解决什么问题 模块化 高级特性、开发效率、安全性 ES6+、Typescript、sacc、less 监听文件变化并反映到浏览器上，提高开发效率 开发完成后的打包，压缩、合并、tree-shaking 等以及其他相关的优化 Webpack 是什么 Webpck 是一个静态的模块化打包工具，为现代的 JS 应用程序 我们来对上面的解释进行拆解： 打包 bundler：webpack 可以将帮助我们进行打包，所以它是一个打包工具。 静态的 static：这样表述的原因是我们最终可以将代码打包成最终的静态资源（部署到静态服务器） 模块化 module：webpack 默认支持各种模块化开发，ES Module、CommonJS、AMD 等 现代的 modern：现代前端开发面临各种各样的问题，才催生了 webpack 的出现和发展 Webpack 和 Vite Webpack 会被 Vite 取代吗？ vite 推出后确实引起了 ...

机身：SONY A7M2 镜头：SONY 24-70GM 出镜：无 地点：华侨城·欢乐港湾 点击可看大图

一、虚拟 DOM 什么是虚拟 DOM？ 虚拟 DOM 就是把真实 DOM 树的结构和信息抽象出来，以对象的形式模拟树形结构，如下： 真实 DOM: <div> <p>Hello World</p></div> 对应的虚拟 DOM 就是： let vnode = { tag: 'div', children: [{ tag: 'p', text: 'Hello World' }],}; 为什么需要虚拟 DOM？ 渲染真实 DOM 会有一定的开销，如果每次修改数据都进行真实 DOM 渲染，都会引起 DOM 树的重绘和重排，性能开销很大。那么有没有可能只修改一小部分数据而不渲染整个 DOM 呢？虚拟 DOM 和 Diff 算法可以实现。 怎么实现？ 先根据真实 DOM 生成一颗虚拟 DOM 树 当某个 DOM 节点数据发生改变时，生成一个新的 Vnode 新的 Vnode 和旧的 oldVnode 进行对比 通过 patch ...

为什么需要缓存 通过缓存机制，可以在相应场景下复用以前获取的资源。 显著提高网站的性能和响应速度 减少网络流量和等待渲染时间 降低服务器压力 HTTP 缓存类型 强缓存 协商缓存 强缓存 对于强缓存，服务器返回的静态资源响应头会设置一个强制缓存的时间，在缓存时间内，如刷新浏览器请求相同资源，在缓存时间未过期的情况下，则直接使用已缓存资源。如缓存资源已过期，执行协商缓存策略。 以下为与强缓存相关的 HTTP 头部字段 字段 用途 实例 优先级 HTTP 版本 Expires 强缓存的过期日期 Expires:Thu,06 Aug 2021 14:36:18 GMT 低 1.0 Cache-Control 指定指令实现缓存机制 Cache-Control:max-age=60 高 1.1 Expires 响应头 Expires 字段包含强缓存资源的过期时间 值为 0 表示资源已过期或非强缓存 Cache-Control 通用消息头字段，通过指令来实现缓存机制。说明一下容易弄混的两个字段，其他指令参考指令大全。 no-cache 在发布缓存副本之前 ...

Vue 的前世今生 2013 尤雨溪个人项目 2014.2 0.1 版本发布 2015.10 1.0 版本发布 模板语法改进 2016.9 2.0 版本发布 跨端 新的渲染机制 2019.10 3.0 alpha 发布 性能 架构 按需引入 Composition API Proxy observer AOT 优化 Vue 1 响应式原理 构建响应式对象流程 walk 函数遍历 data 对象中的属性，调用 defineReactive 将其变成响应式对象 对于对象属性进行递归调用 walk，以保证 data 整个对象树中的属性都是响应式对象。 defineReactive 中使用 watchers 数组储存 watcher，使用 Object.defineProperty 的 get 函数收集 watcher 和返回值，set 函数用来设置值和对 watchers 中的 watcher 进行视图更新。 Walk 函数实现 function walk(data) { Object.keys(data).foreach((key) => ...

前端路由介绍 什么前端路由 路由这个概念最早出现在后端，通过⽤户请求的 url 导航到具体的 html ⻚⾯。现在的前端路由不同 于传统路由，它不需要服务器解析，⽽是可以通过 hash 函数或者 history API 来实现。在前端开发中，我 们可以使⽤路由设置访问路径，并根据路径与组件的映射关系切换组件的显示，⽽这整个过程都是在同 ⼀个⻚⾯中实现的，不涉及⻚⾯间的跳转，这也就是我们常说的单⻚应⽤（spa）。 前端路由带来了什么 相⽐多⻚应⽤(mpa)来说，spa 有以下优点： 不涉及 html ⻚⾯跳转，内容改变不需要重新加载⻚⾯，对服务器压⼒⼩。 只涉及组件之间的切换，因此跳转流畅，⽤户体验好。 ⻚⾯效果会⽐较炫酷（⽐如切换⻚⾯内容时的转场动画）。 组件化开发便捷。 但是同时 spa 也有以下缺点： ⾸屏加载过慢。 不利于 seo。 ⻚⾯复杂度提⾼很多。 ⽤原⽣ js 实现前端路由 什么前端路由 路由这个概念最早出现在后端，通过⽤户请求的 url 导航到具体的 html ⻚⾯。现在的前端路由不同于 传统路由，它不需要服务器解析，⽽是可以通过 hash 函数或者 h5 hi ...

TypeScript 学习笔记 TS 简介 Ts 微软开发，包含 ES6、包含 ES5 编译 tsc xx.ts 每一次都得编译，可以自动编译 开发工具中配置 typescirpt 自动编译 vscode: 创建 tsconfig.json 文件 tsc --init 生成配置文件 tsconfig.json 配置文件中，修改 outDir 配置项，取消注释然后修改为.js vscode 中，点击上方栏位 run task，选择 ts 监听 完成 TS 类型 与 es5 中的区别 // es5：类型变化不报错var flag = true;flag = 234;// ts：必须指定类型typescript;var flag: boolean = true;flag = 131; //报错 TS 类型： boolean number string array 数组： 方式 1：var arr:number[] = [1,2,3]//制定 arr 里面全是数字 方式 2：var arr:Array= [1,2,3] 元组类型（tuple） 方式 1：属于数组的一种，即数组 ...

嵌入式 SQL SQL 语言提供了两种不同的使用方式 交互式 嵌入式 为什么要引入嵌入式 SQL SQL 语言是非过程性语言 事务处理应用需要高级语言 这两种方式细节上有差别，在程序设计的环境下，SQL 语句要做某些必要的扩充 嵌入式 SQL 的处理过程 主语言 嵌入式 SQL 是将 SQL 语句嵌入程序设计语言中，被嵌入的程序设计语言，如 C、C++、Java，称为宿主语言，简称主语言。 处理过程 预编译方法 为了区分 SQL 语句与主语言语句，所有 SQL 语句必须加前缀 EXEC SQL， 主语言为 C 语言时，语句格式： EXEC SQL <SQL 语句>; 主语言为 Java 语言时，语句格式： # SQL <SQL 语句>; 主语言为 C++语言时 使用 ADO： 嵌入式 SQL 语句与主语言之间的通信 将 SQL 嵌入到高级语言中混合编程，程序中会含有两种不同计算模型的语句 SQL 语句 描述性的面向集合的语句 负责操纵数据库 高级语言语句 过程性的面向记录的语句 负责控制逻辑流程 它们之间应该 ...