vue-loader是什么 将.vue文件拆解成模板样式脚本三个部分，分别交给对应的处理机处理，template交给模板编译器，css交给css-loader 在一个文件中编写组件的模板，脚本，样式。并将他们分别处理后整合成可执行的vue文件。 vue-loader是webpack的加载器，在webpack.config.js定义使用 在需要webpack编译的vue文件下，需要引入vue-loader,并进行相应的配置(写一些语法，引入vue-loader) vite不需要使用vue-loader,因为vite文件对vue文件有原生支持，只需要安装对应的插件，@vitejs/plugin-vue,在vite.config.js做相应的配置，就可以识别vue文件，拆解成模板，样式，脚本。 模板:解析成抽象语法树，将抽象语法树编译成渲染函数，执行渲染函数生成虚拟dom,通过patch算法将虚拟dom转化为真实dom 样式:css-loader编译 脚本:将ES6转化为ES5,导入导出模块，导出的对象会作为组件的核心选项，与编译后的模板渲染函数，处理后的样式合并，整理成vm实例。 三个部分会整合成一个可以执行的JS的模块 vm.data.message，现在直接访问this.message。 执行npm run dev是在做什么 读取package.json的文件，执行dev对应的命令，调用构建工具，启动构建工具。 读取配置文件vite.config.js和vue.config.js，加载项目依赖node_module,确定入口文件，从这里开始解析项目的依赖树。 将vue文件转化成模板，脚本，样式，构建依赖树，处理其他资源。 构建完成后，用node.js开启一个服务器，启动端口，挂载项目到服务器。 服务器启动成功，自动打开浏览器，加载index.html文件。 npm和pnpm的差别 npm复制式存储，会为不同项目下载相同的依赖，扁平化管理，占用存储空间，对间接依赖进行依赖提升，会造成幽灵文件，同时，因为需要复制文件到node.module，下载的速度慢。 pnpm是全局内容存储，将下载的依赖存储到全局，不同的项目可以复用，链接引用，通过硬链接和符号链接构建依赖关系，下载的速度快，占用的内存少。 v-for和v-if的优先级 v-for高，会优先执行 首屏加载速度慢 网络延迟，文件量大，重复请求，渲染内容堵塞。 静态资源本地缓存，UI组件按需加载，组件重复打包，图片资源压缩，减少入口文件的体积，按需加载路由组件。 SSR和CSR SSR服务器返回html文件 CSR服务器返回js css 文件 加载css文件，生成cssom，与dom结合生成渲染树，根据渲染树进行布局和绘制。 加载js文件，执行js:生成抽象语法树，生成字节码，执行js:可能修改dom，cssom，绑定事件，网络请求。 html解析，遇到js css文件会加载文件，css文件会生成cssom与html一同解析，未完成的cssom会堵塞渲染。js会堵塞html的解析和渲染，可能会修改dom和cssom，将css和dom合并生成渲染树，进行布局绘制。 优化: 异步加载js，async加载后立刻执行，defer加载后会等到html解析完再执行。 将关键css内联到style标签，避免加载异步文件。将非关键css用media=print标记为非堵塞渲染。
