2022年哪些前端技术会火？ _前端技术

文章插图

以Vite为代表的前端构建工具进入加速赛道ESM 大势所趋，势如破竹，由于 ESM 的普及，而带来的打包工具的革命以及适用于 ESM 下一代 CDN 的发展，业务项目在生产环境开始使用原生的 ESM 代替以前的 Bundle方案，从而导致开发体验及网站速度的大幅提升。
核心代码：
<script type="module">import lodash from 'https://cdn.skypack.dev/lodash';</script>复制代码还记得我在20年的时候，就吐槽构建速度问题，严重影响我们开发的效率。

文章插图

其中凭借ESM成长最快的构建框架Vite，一种全新的前端构建工具。你可以把它理解为一个开箱即用的开发服务器 + 打包工具的组合，但是更轻更快。出自尤大之手，目前npm月下载量超过130万次。

文章插图

核心原理

开发环境下，模块以原生 esm 的形式被浏览器加载。
生产环境下，模块被 Rollup 以传统方式打包，而且做了很多默认优化。
开发和生产环境下共享同一套 Rollup 插件机制，所以单个模块的编译在开发和生产环境下是一致的。

文章插图

文章插图

框架优势

快，极速，使用原生ESM文件
超快的HMR(热重载)
Rollup 插件机制
天然优先支持Vue3
.....你来体验挖掘

丰富的生态

文章插图

更多构建工具介绍：
css-tricks.com/comparing-t…
以Vue3+Ts+Vite+Pinia组合的高效开发套件上面已提到Vite基于Ts语法，并且对Vue3天然的支持，加上尤大主推的Pinia作为vuex的最佳替代品。此套组合或成为22年Vue开发的最佳选择。我建个了Vue3+Vite+Pinia的基础模板供大家参考，后续也会加入一些工具包(自封装的) 。这里只是基础，根据自己项目需求可以增加 Volar / Vue Router / Vue Devtools / VueUse / Element Plus / NutUI等。
我们团队是在21年3月份就开始使用Vue3开发项目了，也是第一批使用vite构建项目的。无线端业务最高峰值PV30万+，整体项目运行稳定，比较多的还是Android/ target=_blank class=infotextkey>安卓端兼容问题(历史问题了) 。此套组合整体的优势：

面向未来技术栈，不需要维护复杂的依赖升级问题
拥抱更多新特性，类似SFC等
提高构建效率-翻倍的
.....

工具包分享另外分享一下我们团队使用的技术包，可以大大团队提升研发效率

pnpm 节省你的磁盘空间，让依赖包也能统一管理，按需更新，老板再也不用担心我的C盘臃肿了
tailwindcss，艾玛香的一塌糊涂，一行css不写，3分钟出一个页面。不适合初中级前端，建议还是先踏实学基础再用框架。
Vue I18n 是 Vue.js 的国际化插件，如果你想做开源框架，国际化首选插件。
ViteSSG，seo优化，这个项目有点意思，大家可以玩玩这个方案，之前我都是通过服务端渲染搞SEO，后来了解到这个可以直接在Vue3的服务器上生成。
Vitest,基于Vite的单元测试工具，目前迭代比较快，尤大金牌赞助。可以持续关注，不建议使用在小项目中。

Web3D图形技术的研究在之前的分享里我已经写过一部分，这里不做过多趋势发展方向的赘述，主要以我们实际案例聊一下这块技术的发展。
需求背景10月份左右我们做了个web3D的项目，主要目标是建立一个小型的城市，让大家基于企业文化做一些线下任务并获取奖励，奖励可以用于装修城市或兑换礼品。例如：按时写日报，阅读最新人事公告，积极参与文化活动等等。不再是冷冰冰的Push通知或内部信，调动大家活跃的工作氛围。
这个项目需要思考的是如何玩出花样？铺天盖地的任务机制在各大App随处可见，用户早已玩腻了。宏大的城市模拟需要安装App或较大的人力投入。轻量级的游戏化应用确实近几年的主流，加持C4D视觉的流行，也更加迎合用户新鲜感的期待。