谋生的路上不抛弃良知 | 谋爱的路上不丢失尊严
web缓存主要指的是两部分：浏览器缓存和http缓存。
http缓存是web缓存的核心，是最难懂的那一部分,也是最重要的那一部分。
浏览器缓存：例如 localStorage(5M)、sessionStorage(5M)、cookie(4k)等等。这些功能主要用于缓存一些必要的数据，比如用户信息。比如需要携带到后端的参数。亦或者是一些列表数据等等。
省钱）加速）减载）SVG 是 Scalable Vector Graphics 的缩写，意为可缩放矢量图形。于 2003年1月14日 SVG 1.1 被Sun公司（已被Oracle公司收购）、Adobe、苹果公司、IBM 以及柯达共同确立成为W3C推荐标准。
Scalable Vector Graphics 的缩写 意为可缩放矢量图形文本的开放网络标准，用来定义用于网络的矢量图形放大或改变尺寸的情况下其图形质量不会有所损失，因此能够优雅而简洁地渲染不同大小的图形，并和CSS，DOM，JavaScript和SMIL等其他网络标准无缝衔接XML 格式定义图形DOM 和 XSL 之类的 W3C 标准是一个整体Canvas 中文名叫
画布，是 HTML5新增的一个标签。Canvas 允许开发者通过JS在这个标签上绘制各种图案。
Canvas 拥有多种绘制路径、矩形、圆形、字符以及图片的方法。
Canvas 在某些情况下可以
代替图片。Canvas 可用于动画、游戏、数据可视化、图片编辑器、实时视频处理等领域。
Webpack在前端构建工具中可以堪称中流砥柱般的存在，日常业务开发、前端基建工具、高级前端面试...任何场景都会出现它的身影。
也许对于它的内部实现机制，我们也许会感到疑惑，日常工作中基于Webpack Plugin/Loader之类查阅API仍然不明白各个参数的含义和应用方式。其实这一切原因本质上都是基于Webpack工作流没有一个清晰的认知导致了所谓的“面对API无从下手”开发。
下面，我们会从如何实现 模块分析项目打包 的角度出发，使用 最通俗，最简洁，最明了 的代码带你揭开Webpack背后的神秘面纱，带你实现一个简易版Webpack，从此对于任何webpack相关底层开发了然于胸。用最通俗易懂的代码带你走进webpack的工作流。
可以根据 代码 一边看一边尝试
微前端 是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。
各个前端应用还可以独立开发、独立部署。同时，它们也可以在共享组件的同时进行并行开发——这些组件可以通过 NPM 或者 Git Tag、Git Submodule 来管理。
qiankun（乾坤） 就是一款由蚂蚁金服推出的比较成熟的微前端框架，基于 single-spa 进行二次开发，用于将Web应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。
那么，话不多说，我们的源码解析正式开始。
子组件不需要任何处理，只需要在父组件引用的时候通过@hook来监听即可，代码如下：
<template>
<Child @hook:mounted="() => {}" />
<Child @hook:updated="() => {}" />
</template>
Vue2 获取文件上下文方法是
require.context('../views/components', true, /\.vue/)Vue3 获取文件上下文方法是
import.meta.glob('../views/components/*.vue')
import Vue from 'vue'
// 自定义组件
const requireComponents = require.context('../views/components', true, /\.vue/)
// 打印结果
// 遍历出每个组件的路径
requireComponents.keys().forEach(fileName => {
// 组件实例
const reqCom = requireComponents(fileName)
// 截取路径作为组件名
const reqComName = reqCom.name|| fileName.replace(/\.\/(.*)\.vue/,'$1')
// 组件挂载
Vue.component(reqComName, reqCom.default || reqCom)
})
VueRouter({
routes:[
{
path: '/about',
name: 'About',
component: resolve => require(['path路径'], resolve), // Vue异步组件
component1: () => import('path路径'), // es6的import
component2: () => r => require.ensure([],() => r(require('path路径')), 'demo'), // webpack提供的require.ensure()
}
]
})
datas：需处理的大数据
consumer: 用于处理需分时的任务
chunkSplit：分时规则，
默认使用 requestIdleCallback
async function UseFragmentDownload(
url = 'https://duyi-static.oss-cn-beijing.aliyuncs.com/files/novel.txt'
) {
const resp = await fetch(url)
const reader = resp.body.getReader()
const decoder = new TextDecoder()
let remainChunk = new Uint8Array(0)
let resultText = ''
for (;;) {
const { value, done } = await reader.read();
if (done) {
break;
}
const lastIndex = value.lastIndexOf(10); // 最后的换行位置
const chunk = value.slice(0, lastIndex + 1); // 等待解析的文本，移除后面一段，保证没有乱码
const readChunk = new Uint8Array(remainChunk.length + chunk.length)
readChunk.set(remainChunk);
readChunk.set(chunk, remainChunk.length);
remainChunk = value.slice(lastIndex + 1);
const text = decoder.decode(readChunk);
resultText += text;
}
}