前端常用技术栈

前言

基础技术

针对web网页可细分为三个部分：结构层(html)、表示层(css)、行为层(js); 随着时间发展这几项都有质的飞跃推出了HTML5、CSS3、ES6

html5新增特性

canvas 用于绘画的元素
audio 、video 用于播放视频和音频的媒体
新的特殊内容元素如：article、footer、header、nav、section
新的表单控件 -- 如：date、time、email等
...

css3新增特性

box-shadow 元素阴影
transition 过度
animation 动画
弹性布局、盒模型、媒体查询等
...

es6

详细参考阮一峰es6

前端趋势

在目前的前端框架中以React，Vue，Angular三大框架为主。结合相关生态以及构建工具，那么选择哪个技术框架成为了很多前端人需要思考的头等大事

2022 javascript明星项目

下列图表对比了各个项目在 GitHub 上于过去 12 个月新增的 star 数量。分析的数据来源为 Best of JS 网站

本文围绕以下几点展开

前端框架
构建工具
css in js
状态管理

前端框架

目前国内最火的是vue，仅次vue的就是react技术栈。react由facebook出品提出很多创新式概念，VirtualDOM、JSX、Diff算法，Fiber结构等，支持ES6语法，采用函数式编程，门槛稍高，但也更灵活，能让开发具有更多可能性

在 2022 年，React 仍然是冠军，但如果考虑到 Vue.js 的星星在 v2 和 v3 版本的仓库中被分割，那么 Vue.js 的受欢迎程度也很接近了 Vue 2 将于 2023 年 12 月 31 日停止维护

Qwik 是一个前端框架，语法类似 React 使用 JSX 和 Hooks，不过 Qwik 是全栈SSR框架，而且 Qwik 采用了一系列策略优化页面的首屏性能，做的无论应用体积多大，首屏性能测试效果极佳

Todolist Demo

构建工具

当前工程化痛点

现在常用的构建工具如Webpack，主要是通过抓取-编译-构建整个应用的代码（也就是常说的打包过程），生成一份编译、优化后能良好兼容各个浏览器的的生产环境代码。在开发环境流程也基本相同，需要先将整个应用构建打包后，再把打包后的代码交给dev server（开发服务器）。

Webpack等构建工具的诞生给前端开发带来了极大的便利，但随着前端业务的复杂化，js代码量呈指数增长，打包构建时间越来越久，dev server（开发服务器）性能遇到瓶颈

缓慢的服务启动： 大型项目中dev server启动时间达到几十秒甚至几分钟。
缓慢的HMR热更新： 即使采用了 HMR 模式，其热更新速度也会随着应用规模的增长而显著下降，已达到性能瓶颈，无多少优化空间。

vite

vite优势

webpack会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。而vite是直接启动开发服务器，请求哪个模块再对该模块进行实时编译。由于现代浏览器本身就支持ES Module，会自动向依赖的Module发出请求。vite充分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack那样进行打包合并。由于vite在启动的时候不需要打包，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快。当浏览器请求某个模块时，再根据需要对模块内容进行编译。这种按需动态编译的方式，极大的缩减了编译时间，项目越复杂、模块越多，vite的优势越明显。在HMR方面，当改动了一个模块后，仅需让浏览器重新请求该模块即可，不像webpack那样需要把该模块的相关依赖模块全部编译一次，效率更高。当需要打包到生产环境时，vite使用传统的rollup进行打包，因此，vite的主要优势在开发阶段<利用esbuild编译、以及预构建>

Vite 继续保持其发展势头，成为最流行的前端工具之一。其先驱 Snowpack 已不再维护，并推荐使用 Vite。它的发展并不限于 Vue 生态系统：Vite 甚至作为Create-React-App的现代替代品。

swc vs babel vs esbuild

SWC is 20x faster than Babel on a single thread and 70x faster on four cores.

swc & babel & esbuild 对比

尽管 Babel 仍然很流行，但 swc 和 esbuild 已被许多项目和框架广泛采用。这些新的工具可以大大提升构建和转译的性能。

swc配置

{
    "env": {
      "coreJs": 3,
      "mode": "usage",
      "loose": true,
      "dynamicImport": true
    },
    "jsc": {
      "parser": {
        "syntax": "typescript",
        "tsx": true,
        "decorators": true,
        "dynamicImport": true
      },
      "loose": true,
      "transform": {
          "legacyDecorator": true,
          "decoratorMetadata": true,
          "react": {
            "pragma": "React.createElement",
            "pragmaFrag": "React.Fragment",
            "throwIfNamespace": true
          }
       }
    },
    "module":  {
      "type": "commonjs"
    },
    "sourceMaps": false,
    "inlineSourcesContent": false,
    "minify": false
  }

如果 Webpack 处理的东西非常多的话，SWC 在整体上的效果就更没有那么明显了。在最终构建时只提升了大概 50% 的速度。

esbuild/Turborepo 基于go实现的构建工具，在语言层面上就具有一定的性能优势