本文章是关于前端设计框架相关基础知识的梳理和笔记整理。
一.基础认识
1.什么是前端框架？
- 框架是提供一套完整的解决方案，按照规定好的代码结构来做编排，同时前端功能越来越强大从而产生了前端框架，开发web产品就很必要用前端框架。
- 前端框架一般指用于简化网页设计的框架，使用广泛的前端开发套件，比如我们熟悉的HTML、CSS和JavaScript等等，这些框架封装了一些功能，比如html文档操作，漂亮的各种控件，比如按钮，表单等等。
- 使用前端框架可以降低界面开发周期并提高界面的美观性。
2.什么是Vite？
- vite是vue官方推出的一个打包工具，打包速度比webpack更快，也可以代替脚手架来创建项目。
- 创建项目需要安装Vite以及额外的配置项目有：vue-router，vuex，less，axios。
- Vite的基本实现原理，就是启动一个koa服务器拦截由浏览器请求ESM的请求。通过请求的路径找到目录下对应的文件做一定的处理最终以ESM的格式返回给客户端。
3.摇树优化（tree shaking）
- 在前端的性能优化中，es6 推出了tree shaking机制，tree shaking就是当我们在构建阶段时，它会自动将我们用不到的代码，或者永远不会执行的代码删除，在Uglify阶段查出，不打包到bundle中。
- 注意：Tree Shaking 只支持 ESM 的引入方式，不支持 Common JS 的引入方式。
4.Babel插件开发
- SAT（抽象语法树Abstract Syntax Tree）,或简称语法树（Syntax tree），是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。
- Babel处理代码的步骤:（1） 解析，对代码进行 AST 编译，得到代码的 AST 结构。（2）转换，按我们的要求，对代码的 AST 进行处理，得到处理后的 AST 结构。（3） 生成，将 AST 转回成并生成我们的目标代码。
二.总结
文章写的很简短，对Vite以及插件的学习还在路上。
