5coder的大前端进阶之路-个人博客网站：blog.5coder.cn

接下来再来回顾一下Vite，之前已经演示过Vite的基本使用，这里的重点是来了解Vite的核心实现原理。先来回顾一下Vite的概念，ECMAScriptES Module它的出现是为了解决外webpack在开发阶段使用冷启动时间过长，另外热更新反应速度慢的问题。使用Vite创建的项目就是一个普通的Vue3的应用，没有太多特殊的地方，相比基于Vue cli创建的项目也少了很多的配置文件和依赖。Vite创建的项目开发依赖非常的简单，只有vite和@。Vite就是接下来要模拟实现的命令航工具，

接下来通过模拟Vue3的响应式系统来深入了解它内部的工作原理。先来回顾一下Vue3重写了响应式系统，和Vue2相比，Vue3的响应式系统底层采用对象实现，在初始化的时候不需要遍历所有的属性，把属性通过转换成和。另外如果有多层属性嵌套的话，只有访问某个属性的时候才会递归处理下一级的属性，所以Vue3中响应式系统的性能要比Vue2好。Vue3的响应式系统默认可以监听动态添加的属性，还可以监听属性的删除操作以及数组的索引和属性的修改操作。另外Vue3的响应式系统还可以作为一个模块单独使用。接下来自己实现Vue3中

接下来我们来介绍一下Vue3中新增的如何使用。注意仅仅是Vue3中新增的，我们依然可以使用。先来实现一下之前演示的获取鼠标位置的案例。做这个案例之前，需要先介绍一下这个函数，这里不借助任何的构建工具，直接使用浏览器中原生的的方式来加载Vue模块。注意，这里我们会使用完整版的Vue。首先，安装Vue3.0，创建文件。打开浏览器，可以看到打印出来的对象。这里可以看到和都可以正常响应式，然后打开开发人员工具来看一下刚刚打印的对象，把这个对象展开，这里的成员要比Vue2中的对象的成员要少很多，而且这些成员都没有使

源码组织方式的变化TypeScriptMonorepopackages下都是独立发行的包，可以独立使用。Composition API（组合API）Vue 3.0代码虽然重写，但是90%以上的API兼容2.x，并且增加了（组合API），是用来解决Vue 2.x在开发大型项目时遇到超大组件，使用不好拆分和重用的问题。性能提升Vue 3.0使用Proxy重写了响应式代码，并对编译器做了优化，重写了虚拟DOM，从而让渲染和update的性能都有了大幅度的提升，另外服务端渲染SSR的性能也提升了2-3倍。

在对你的应用程序使用服务器端渲染 (SSR) 之前，你应该问的第一个问题是，是否真的需要它。技术层面：业务层面：（1）基于 Vue SSR 官方文档提供的解决方案官方方案具有更直接的控制应用程序的结构，更深入底层，更加灵活，同时在使用官方方案的过程中， 也会对Vue SSR有更加深入的了解。该方式需要你熟悉 Vue.js 本身，并且具有 Node.js 和 webpack 的相当不错的应用经验。（2）Nuxt.js 开发框架NUXT提供了平滑的开箱即用的体验，它建立在同等的Vue技术栈之上，但抽象出很多模板

大多数自定义指令直接操作 DOM，因此会在服务器端渲染 (SSR) 过程中导致错误。推荐使用组件作为抽象机制，并运行在「虚拟 DOM 层级(Virtual-DOM level)」（例如，使用渲染函数(render function)）。如果你有一个自定义指令，但是不是很容易替换为组件，则可以在创建服务器 renderer 时，使用directives选项所提供"服务器端版本(server-side version)"。

通过 npm install terser安装依赖后，直接执行 terser 命令语句 npx terser ./src/index.js -o ./terser/default.js，这里没有进行配置，所以使用的是默认处理方式，只移除了换行。但在项目中，直接使用 terser过于繁琐，所以借助 terser-webpack-plugin统一编译，当 mode为 production时，有默认的配置，也可以自行定义处理规则。是可以直接安装并独立使用的，使用的时候有非常多的配置可以自行定义，具体可参考。

通过Webpack实现前端项目整体模块化的优势很明显，但是它同样存在一些弊端，那就是项目当中所有的代码最终都会被打包到一起，试想一下，如果说应用非常复杂，模块非常多的话，那打包结果就会特别的大，很多时候超过两三兆也是非常常见的事情。而事实情况是，大多数时候在应用开始工作时，并不是所有的模块都是必须要加载进来的，但是，这些模块又被全部打包到一起，需要任何一个模块，都必须得把整体加载下来过后才能使用。而应用一般又是运行在浏览器端，这就意味着会浪费掉很多的流量和带宽。更为合理的方案就是把的打包结果按照一定的规则去

在开发中我们会有各种各样的模块依赖，例如 js 文件、css 文件、vue 文件等，有自己编写的，也有第三方库。resolve 可以让Webpack在 require/import 语句中，找到需要解析的模块代码。

这里，我们还可以为这个命令传入一个**–open**的参数，它可以用于去自动唤起浏览器，去打开我们的运行地址，打开浏览器过后（如果说你有两块屏幕的话），你就可以把浏览器放到另外一块屏幕当中，然后，我们去体验这种一边编码，一边即时预览的开发环境了。这个工具可以直接解决我们之前的问题。例如在应用程序的运行过程中，修改了某个模块，通过自动刷新就会导致整个应用整体的刷新，页面中的状态信息都会丢失掉，而如果这个地方使用的是热替换的话，就可以实现只将刚刚修改的这个模块实时的去替换到应用当中，不必去完全刷新应用。

url-loader会将引入的文件进行编码，生成DataURL，相当于把文件翻译成了一串字符串，再把这个字符串打包到JavaScript。第一种方式，就是在Webpack配置中设置来修改此模板字符串，其中assetModuleFilename默认会处理文件名后缀的点，所以无需手动添加点。此方式为公共的处理方法，当需要同时处理图片资源和字体资源时，通用方法会导致两种资源类型放在同一个目录下，此处不建议使用assetModuleFilename。比如关于图片的输出文件名，我们可以让其都输出在images。

需要有一个工具站出来解决问题，可以让开发者在入口的地方随心所欲，用个人喜欢的技术栈完成开发，从而不需要关系过程，但是最终的结果可以在浏览器上正常展示，因此这里就会用到打包工具。回到初始思路上，我们需要less-loader将less文件编译为css文件，其次使用css-loader搭配style-loader，将css样式编译至html文件中，所以需要进行配置，配置思路与css相同。伴随着AJAX的诞生，前端的工作模式也发生了很大变化，前端不仅仅是展示界面，而且还可以管理数据以及和用户进行数据的交互。

纯手写Promise源码，如有遗漏场景或漏洞，请评论区指出，不胜感激！

Nuxt.js 综合案例介绍GitHub仓库：https://github.com/gothinkster/realworld在线示例：https://demo.realworld.io/#/接口文档：https://github.com/gothinkster/realworld/tree/master/api页面模板：https://github.com/gothinkster/realworld-starter-kit/blob/master/FRONTEND_INSTRUCTIONS.m

Nuxt.js基础Nuxt.js介绍Nuxt.js是什么？官网GitHub仓库官网介绍Nuxt.js 是一个基于 Vue.js 的服务端渲染应用框架，它可以帮我们轻松的实现同构应用。通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有Node.js 项目中使用 Nuxt.js。Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。除此之外

服务端渲染基础概述随着前端技术栈和工具链的迭代成熟，前端工程化、模块化也已成为了当下的主流技术方案，在这波前端技术浪潮中，涌现了诸如 React、Vue、Angular 等基于客户端渲染的前端框架，这类框架所构建的单页应用（SPA）具有用户体验好、渲染性能好、可维护性高等优点。但也也有一些很大的缺陷，其中主要涉及到以下两点：（1）首屏加载时间过长与传统服务端渲染直接获取服务端渲染好的 HTML 不同，单页应用使用 JavaScript 在客户端生成 HTML来呈现内容，用户需要等待客户端 JS 解析

Vuex状态管理课程目标组件通信方式回顾Vuex核心概念和基本使用购物车案例模拟实现Vuex组件内的状态管理流程Vue最核心的两个功能：数据驱动和组件化组件化开发给我们带来了：更快的开发效率更好的可维护性每个组件都有自己的状态、视图和行为等组成部分new Vue({// state data () { return { count: 0 } },// view template: `<div>{{ count }}&l

Vue源码剖析-模板编译和组件化模板编译模板编译的主要目的是将模板(template)转换为渲染函数(render)<div> <h1 @click="handler">Title</h1> <p>some content</p></div>渲染函数h()函数的作用最终回到用vm.$createElmnent()生成VNoderender(h) { return h('div', [ h(

Vue.js源码剖析-虚拟DOM响应式原理回顾Vue初始化过程Vue中静态成员和实例成员初始化的过程首次渲染过程响应式实现过程虚拟DOM回顾什么是虚拟DOM虚拟DOM(Virtual DOM)是使用JavaScript对象来描述DOM，虚拟DOM的本质就是JavaScript对象，使用JavaScript对象来描述DOM的结构。应用的各种状态变化首先作用于虚拟DOM，最终映射到DOM。Vue.js中的虚拟DOM借鉴了Snabbdom，并添加了一些Vue.js中的特性，例如：指令和组件

Vue源码解析-响应式原理欢迎访问个人网站：blog.5coder.cn课程目标Vue.js的静态成员和实例成员初始化过程vue.use()、vue.set()、vue.extened()等这些全局成员的创建过程vm.el、‘vm.el、`vm.el、‘vm.data、vm.$on、vm.$mount`等这些实例成员的创建过程首次渲染的过程创建完vue实例，并把数据传递给vue之后，vue内部是如何把数据渲染到页面的，后续在分析源码过程中都是基于这个过程的数据响应式原理（核

模拟 Vue.js 响应式原理摘要：接下来学习Vue响应式的原理，其中会模拟实现一个最简单的Vue。下面先来看一段代码，这段代码是Vue最基础的结构，我们要做的事情就是自己实现一个实现相同的效果。模拟的原因是我们都知道在面试的时候，Vue响应式原理是一个必问的问题，通过模拟显示Vue响应式的原理，可以更好的回答这些问题。另外在模拟显示原理的过程中，就是借鉴Vue的源码模拟一个最小版本的Vue，这个过程中可以学习别人优秀的经验，并且把它转化成自己的经验，在实际项目中遇到问题也可以通过原理层面来解决。

Vue-Router 原理实现摘要：首先来复习一下Vue-Router的基本使用，模拟实现之前，通过它的基本使用方式来进行分析如何实现。然后再来回顾一下，Hash模式和History模式的区别，演示一下History模式如何去使用，History模式要结合服务器一起来使用。最后再来模拟实现自己的Vue-Router，通过自己来实现一个Vue-Router，通过模拟实现Vue-Router来了解Vue-Router内部的实现原理。官方文档1.Vue-Router基本回顾-使用步骤使用Vue.

一、Vue基础结构Vue代码的基础结构：这是最基础的Vue代码，在创建Vue实例时，传入el和data选项，Vue内部会把data中的数据传入到el指向的模板中，并把模板渲染到浏览器。本段代码执行的效果与上面相同，这里使用了render选项和$mount方法。使用Vue-cli脚手架创建的代码解构与下面的代码相同，render方法接受一个参数，参数为h函数，h函数在后面的笔记中会有详细的讲解，这里简单介绍一下，h函数的作用是创建虚拟dom，render方法把h函数创建的虚拟dom返回。​$mo

Part2 · 前端工程化实战 · 模块化开发与规范化标准一、模块化演变过程模块化概述：模块化开发为当前最重要的前端开发范式之一。随着前端代码的日益复杂，的前端项目代码出现了不得不花费大量时间去整理。而模块化就是最主流的代码组织方式。它通过把复杂的代码通过功能不同划分为不同的模块，以单独维护的方式，提高开发效率，降低维护成本。【模块化】仅仅为一个思想，并没有提供具体的实现。1.stage1 基于文件划分将每一个模块独立为一个文件，在页面中引入这些文件（web中最原始的模块化系统）。具体做法

Part2 · 前端工程化实战模块化开发与规范化标准文章说明：本专栏内容为本人参加【拉钩大前端高新训练营】的学习笔记以及思考总结，学徒之心，仅为分享。如若有误，请在评论区支出，如果您觉得专栏内容还不错，请点赞、关注、评论。共同进步！上一篇：【前端工程化实战-模块化开发与规范化标准（Day13）】本篇主要内容是前端模块化开发与规范化标准，接续上一篇三、常用的模块化打包工具1. Webpack打包1.1 模块打包工具的由来及概要模块化确实很好的解决了在复杂应用开发过程当中的代码组织问题，

Part2 · 前端工程化实战模块化开发与规范化标准文章说明：本专栏内容为本人参加【拉钩大前端高新训练营】的学习笔记以及思考总结，学徒之心，仅为分享。如若有误，请在评论区支出，如果您觉得专栏内容还不错，请点赞、关注、评论。共同进步！上一篇：【脚手架工具及自动化构建】本篇主要内容是前端模块化开发与规范化标准一、模块化演变过程模块化概述：模块化开发为当前最重要的前端开发范式之一。随着前端代码的日益复杂，的前端项目代码出现了不得不花费大量时间去整理。而模块化就是最主流的代码组织方式。他通过

Part1 · JavaScript【深度剖析】JavaScript性能优化-工具及代码优化文章说明：本专栏内容为本人参加【拉钩大前端高新训练营】的学习笔记以及思考总结，学徒之心，仅为分享。如若有误，请在评论区支出，如果您觉得专栏内容还不错，请点赞、关注、评论。共同进步！上一篇：【JavaScript性能优化-工具及代码优化】本篇主要内容是前端脚手架工具及自动化构建超长文、多图预警！！！超长文、多图预警！！！一、脚手架工具脚手架的本质作用：创建项目基础结构、提供项目规范和约定相同的

本篇主要内容是JavaScript的性能优化，包含Performance工具及JavaScript代码优化

主要内容为JavaScript性能优化、内存管理、GC算法以及V8引擎垃圾回收策略

本篇开始，梳理一些TypeScript语言的知识。包含快速上手、原始类型、作用域、数据类型等

Part1 · JavaScript【深度剖析】TypeScript语言文章说明：本专栏内容为本人参加【拉钩大前端高新训练营】的学习笔记以及思考总结，学徒之心，仅为分享。如若有误，请在评论区支出，如果您觉得专栏内容还不错，请点赞、关注、评论。共同进步！上一篇：【ECMAScript模板字符串】、【ES6参数】、【展开数组、对象】、【箭头函数】、【对象】、【代理Proxy】、【class类】、【set、map数据结构】本篇开始，梳理一些TypeScript语言的知识。首先看一下关于强、弱类型的语

Part1 · JavaScript【深度剖析】ES 6新特性查看我整理的ES新特性思维导图，参照思维导图可以宏观角度来学习ES6的新特性。传送门：ES新特性思维导图文章说明：本专栏内容为本人参加【拉钩大前端高新训练营】的学习笔记以及思考总结，学徒之心，仅为分享。如若有误，请在评论区支出，如果您觉得专栏内容还不错，请点赞、关注、评论。共同进步！上一篇：【ECMAScript模板字符串】、【ES6参数】、【展开数组、对象】、【箭头函数】、【对象】、【代理Proxy】、【class类】、【se

Part1 · JavaScript【深度剖析】ES 新特性与 TypeScript、JS 性能优化本篇内容：模板字符串、参数默认值、展开数组、箭头函数、对象字面量增强、Proxy代理、class类、Set数据以及Map数据

Part1 · JavaScript【深度剖析】ES 新特性与 TypeScript、JS 性能优化文章说明：本专栏内容为本人参加【拉钩大前端高新训练营】的学习笔记以及思考总结，学徒之心，仅为分享。如若有误，请在评论区支出，如果您觉得专栏内容还不错，请点赞、关注、评论。共同进步！上一篇：【JavaScript异步编程】、【手写promise】一、ECMAScript概述ECMAScript，即 ECMA-262 定义的语言，并不局限于 Web 浏览器。事实上，这门语言没有输入和输出之类的方法

Part1 · JavaScript【深度剖析】函数式编程与Js异步编程、手写Promise文章说明：本专栏内容为本人参加【拉钩大前端高新训练营】的学习笔记以及思考总结，学徒之心，仅为分享。如若有误，请在评论区支出，如果您觉得专栏内容还不错，请点赞、关注、评论。共同进步！上一篇:函子前情提要：上一篇中提到了【函子】，点击上方链接可查看。本篇主要从代码角度去了解primise，基本用法都写在注释内，若有疑问，欢迎留言九、JavaScript异步编程1.同步模式同步模式指的就是我们

Part1 · JavaScript【深度剖析】函数式编程与Js异步编程、手写Promise文章说明：本专栏内容为本人参加【拉钩大前端高新训练营】的学习笔记以及思考总结，学徒之心，仅为分享。如若有误，请在评论区支出，如果您觉得专栏内容还不错，请点赞、关注、评论。共同进步！文章目录Part1 · JavaScript【深度剖析】函数式编程与Js异步编程、手写Promise@[toc]一、为什么要学习函数式编程二、什么是函数式编程三、前置知识1.函数是一等公民2.高阶函数什么是高阶函数使用高阶函数的

Part1 · JavaScript【深度剖析】函数式编程与Js异步编程、手写Promise文章说明：本专栏内容为本人参加【拉钩大前端高新训练营】的学习笔记以及思考总结，学徒之心，仅为分享。如若有误，请在评论区支出，如果您觉得专栏内容还不错，请点赞、关注、评论。共同进步！上一篇前情提要：上一篇中提到了【纯函数】、【柯里化】、【函数组合】，点击上方链接可查看。七、Functor（函子）1.为什么要学函子到目前为止已经已经学习了函数式编程的一些基础，但是我们还没有演示在函数式编程中如何

Part1 · JavaScript【深度剖析】函数式编程与Js异步编程、手写Promise文章说明：本专栏内容为本人参加【拉钩大前端高新训练营】的学习笔记以及思考总结，学徒之心，仅为分享。如若有误，请在评论区支出，如果您觉得专栏内容还不错，请点赞、关注、评论。共同进步！上一篇前情提要：上一篇中提到了js中的部分前置知识：【高阶函数】、【闭包】，点击上方链接可查看。四、纯函数1.纯函数概念纯函数：相同的输入永远会得到相同的输出，而且没有任何可观察的副作用纯函数就类似数学