前言
最近在学习掘金小册《深入浅出Vite》，整个课程预计5月底就能能更新完成了。整个小册以理论加实践的方式讲解了Vite相关的基础知识，实战技能以及底层原理。虽然源码部分和手写部分还没有学完，但是已经很有收获，每学习一节就能学到干货！
本文在对学习的内容进行总结的基础上归纳出相关思考题。这些思考题都是基于课程内容，每个人学习完都会有不同的理解和思考，所以这里我只列出题目，而没有给出答案。题目中会有重复或者描述方式不正确的地方您可以留言纠正。想必思考题中的一些也会成为面试题，如果对您求职面试有帮助那就太好了，当然这不是初衷。这些问题或者问题的答案如果能对我们有所启发，帮助解决工程中的问题才是最重要的。
课程中1-3课主要是Vite、ESM介绍以及使用Vite搭建项目，20-27课讲解Vite源码和手写框架的内容，所以这两部分没有归纳思考题。思考题的范围是从第4课到第19课，属于基本知识，双引擎和高级应用。
第4课 样式方案 思考题
1.原生CSS开发有什么问题？
2.针对原生CSS痛点，都诞生了哪些解决方案？
3.Vite中如何使用SASS?
4.Vite中如何对CSS Module生成的样式类进行自定义的配置？
5.请以autoprefixer为例说明如何在Vite中使用postcss插件？
6.Vite中如何集成CSS In JS 方案？
7.Vite中如何接入CSS 原子化框架？
第5课 代码规范 思考题
1.ESLint配置中parser选项和parserOptions选项的作用？
2.ESLint配置中，规则ID写成0,1,2都代表什么含义？
3.举例说明ESLint配置中plugins选项的作用？
4.ESLint配置中extends选项的作用？
5.ESLint配置中选项env和globals的作用？
6.Prettier的作用是什么？若将Prettier结合到ESLint工具中，都要用到什么工具？
7.Vite中如何接入ESLint?
8.StyleLint的作用是什么？在Vite中如何集成StyleLint?
9.若想在提交代码前进行lint检查，如何做？
10.如何规范commit代码时提交的信息？
第6课 静态资源 思考题
1.Vite项目中都有哪些和图片加载相关的配置和插件？
2.对于json导出相关的配置项namedExports和stringify的含义？
3.Vite中使用Web Worker时，引入worker时需要注意什么？
4.vite中如何导入和使用wasm文件？
5.assetsInclude配置项的作用是什么？
6.静态资源在线上版本中需要将地址前缀换成CDN地址前缀，如何做？
7.有时候项目中的某些图片需要放到某个存储服务而另一些图片需要放到另外的存储服务中，你有什么解决方案？
8.在Vite中静态资源两种构建方式？Vite是如何处理的？通过哪个配置项可以修改？
9.Vite中对图片进行压缩使用什么插件？
10.谈谈你对svg雪碧图的理解以及vite中如何使用雪碧图方案进行优化？
11.谈谈import.meta.glob的使用？
第7课 预构建 思考题
1.为什么说Vite是提倡no-bundle的构建工具？
2.为什么需要对第三方依赖预构建？
3.Vite中，依赖预构建主要做了哪两件事情？
4.Vite中如何开启预构建？
5.Vite将预构建产物存放在哪里？如何利用浏览器的强缓存以及本地缓存？
6.有时不希望使用本地缓存的文件，如何来清除缓存和手动开启预构建？
7.Vite提供了哪些配置项来定制预构建过程？
8.哪些场景需要配置include呢？
9.第三方包出现问题怎么办？
第8课 双引擎架构 思考题
1.Vite底层使用了哪两个构建引擎？
2.Esbuild在Vite的构建体系中发挥了哪些作用？
3.在开发阶段的依赖构建阶段Esbuild起到了什么作用？
4.Esbuild作为打包工具存在什么缺点？
5.Esbuild作为TS和JSX编译工具有什么优点和局限？
6.Esbuild作为压缩工具相比Terser效率高的原因是什么？
7.Rollup在vite中都扮演什么角色？
8.Vite在生产环境中，对Rollup的打包能力进行了哪些扩展优化？
9.Vite如何做到兼容Rollup插件写法的？
第9课 Esbuild功能使用与插件开发 思考题
1.为什么Esbuild性能极高？
2.可以通过哪两种方式来使用Esbuild?
3.Esbuild插件作为一个对象包含哪两个属性？
4.Esbuild插件中build对象上都有哪些钩子可供使用，请简要介绍？
5.onResolve和onLoad钩子钩子接收的入参是什么，有什么含义？
6.onStart和onEnd钩子使用时需注意什么？
7.基于Esbuild编写一个HTML构建插件，简述大概流程？
第10课 Rollup打包基本概念和使用 思考题
1.为什么深入学习Vite需要掌握Rollup?
2.什么是Tree Shaking, 为什么Rollup可以具有天然的Tree Shaking功能？
3.Rollup中如何进行多产物配置？
4.Rollup中如何进行多入口配置？
5.对于有些第三方包有时不想让Rollup进行打包，如何配置？
6.Rollup为什么需要插件？
7.在你的开发实践中都使用过哪些常用的Rollup库？
8.可以通过JS API的方式来调用Rollup, 主要用到Rollup哪两个API ?
第11课 深入理解Rollup插件机制 思考题
1.为什么Rollup设计了一套完整的插件机制？（为什么需要插件）
2.在Rollup一次完整的构建过程中，Rollup会经历哪两个阶段？每个阶段的作用是什么？
3.谈谈你对插件Hook类型的理解？
4.根据Hook执行方式可以把插件分成哪几类？
5.请描述一下Rollup插件build阶段的工作流程？
6.请描述一下Rollup插件在Output阶段的工作流？
7.请结合具体的Rollup插件谈一谈插件Hook的使用？
第12课 Vite插件开发与实战 思考题
1.Vite在开发阶段会调动一些列与Rollup兼容的钩子，这些钩子主要分为哪几个阶段？
2.Vite独有的插件Hook有哪些，简述作用？
3.Vite中插件Hook执行顺序是怎样的？
4.Vite插件enforce属性的作用和取值？
5.如何指定Vite插件的应用场景(开发环境或生产环境)?
6.使用过vite-plugin-inspect插件吗？作用是什么？
第13课 HMR API以及原理 思考题
1.HMR是什么？
2.Vite在实现HMR时如何使用的import.meta?
3.HMR边界的含义？
4.hot.accept可以处理几种更新的情况？
5.编写HMR相关代码时，为什么需要if (import.meta.hot)条件守卫？
6.hot.dispose的作用是什么？
7.hot.data属性的作用是什么？
8.什么时候需要手动HMR?
第14课 代码分隔 思考题
- 解释一下bundle,chunk,vendor的概念
2.传统的单chunk打包模式有什么问题？
3.Initial Chunk和Async Chunk是指什么？
4.http 响应头中cache-control的作用？
5.谈一下Vite默认的拆包策略的做法？
6.既然Vite有默认的拆包策略，我们为什么还需要自定义拆包策略？
7.Vite自定义拆包策略通过哪个配置实现？简述配置方式？
8.当自定义拆包时遇到了循环引用问题时如何解决？
第15课 语法降级与Polyfill 思考题
1.Vite是否可以构建出支持低版本浏览器的产物？
2.旧版本浏览器语法兼容问题分为哪两类？
3.为解决旧浏览器语法兼容问题，需要用到什么工具？作用都是什么？使用时需注意什么问题？
4.利用@babel/preset-env时有两个重要配置：targets ，useBuiltIns。请你谈一下它们的作用？
5.解决浏览器兼容问题时，@babel/preset-env方案有什么局限？
6.解决浏览器兼容性问题时，可以使用transform-runtime方案，简述其使用和配置流程？
7.谈一下Vite降级插件@vitejs/plugin-legacy的使用及原理？
第16课 SSR 思考题
1.CSR存在的问题?
2.SSR为什么能加快首屏加载速度和有利于SEO？
3.SSR应用的两大生命周期是什么？
4.SSR构建时需要做哪些事情？
5.SSR在运行时都需要做哪些事？
6.什么情况下需要由SSR降级到CSR?
7.SSR中不能使用window，document之类的API如何解决？
8.SSR中如何自定义Head?
9.SSR中使用流式渲染有什么好处？有什么限制？
10.为什么右边要在SSR中使用缓存？都缓存什么内容？
11.SSR性能监控都关注哪些指标？
第17课 模块联邦 思考题
1.模块共享都有哪些方案？
2.封装npm包可以解决复用问题，但是又什么问题？
3.CDN引入的方式存在什么问题？
4.Monorepo的原理，优势，劣势？
5.简述模块联邦（Module Federation）的核心概念？
6.模块联邦有什么优势？
7.如何使用Vite实现模块联邦？
第18课 ESM高阶特性 思考题
1.ESM包括哪些高阶特性，请简要介绍？
2.什么是 Pure ESM ?
3.如何看待Pure ESM, 什么情况下适合使用？
4.有什么工具可方便产出ESM和CommonJS双格式的产物？
第19课 性能优化 思考题
1.不同场景对项目性能优化的关注点不一样，请谈谈你的理解？
2.项目加载性能优化的常见手段有哪些？
3.http2主要解决了什么问题？
4.请谈一下对dns预解析的理解？
5.有了解Preload/Prefetch吗？
6.对modulepreload的理解，vite配置中如何支持modulepreload？
7.vite中如何进行产物分析？
8.Vite中资源压缩相关的配置都有哪些？
9.谈谈你对构建产物拆包的理解（构建产物拆包）？
10.Vite中内置了怎样的代码拆包能力?
11.谈谈你对按需加载的理解?
12.谈谈你对预渲染优化的理解
写在后面
在掘金买了好多小册，但是感觉这个《深入浅出Vite》小册是物超所值的，讲解的细致，还有源码可以参考，老师答疑回复也是蛮快的。刚开始工作到现在，接触到的项目都是用Webpack或者vue-cli的，而实际开发过程中基本不用我自己去配置，都是组长配置好的，而学习Webpack主要是看博客写demo项目，感觉对其理解的不是特别深刻。而到了现在，正是Vite风生水起的时候，真不想错过它的精彩，希望能够学以致用！
