最近看了些webpack相关的视频，对webpack有了进一步的学习，这里做了些总结，可能不全面、片面，欢迎大家指出，一起学习讨论。

提到webpack先想到的是文件的打包，对代码进行构建，生成的结果用于生产环境。下面以自问自答的形式进行记录：

1. 为什么需要对前端代码进行打包呢

大概有以下几点原因：

• 开发分工的变化，早期前端开发负责页面的样式实现，简单的交互逻辑。随着单页面应用的盛行，不仅要还原设计稿，较好的过渡效果，动画效果，还需要关注页面的路由变化，页面复杂的交互逻辑，乃至部分接口数据处理逻辑。

• 框架的变化，早期js没有统一的规范，项目中引入js库方便浏览器的兼容。随着技术的发展变革，模块化编程思想的普及，Angular，React，Vue相继登场。

• 语言的变化，逐步规范化，各种预处理器的诞生，eg： sass，typescript

• 环境的变化，早期页面在移动端和浏览器中运行，现在还可以在服务端渲染SSR

• 工具的变化，现在的前端框架有相对完整生态，配套的cli，各种loader，插件，在这些影响下进行模块化开发，项目的文件数量增多，如：采用jade开发模版，sass编写css，typescript实现交互逻辑，可以大大的提高开发效率，那么语言编译就不可或缺了，此时webpack可以解决你的无后顾之忧。

  阅读全文 »

前言

尤大大早在2019年10月5日就开放了vue3的源码，时隔半年，于今年的4月17日发布了vue3.0的Beta版本，4月21日B站开直播，对vue3.0做分享总结，这一连串的操作，也算是兢兢业业，大写的优秀了。这篇文章重点来解密一下他在视频里所提及的一些新特性，包括性能方面的大幅度提升，Tree-shaking抖动，Fragments，Teleport，Suspense，自定义渲染API等，其中最重磅的莫过于Composition API了，虽然有那么点像React Hooks，但是气质上还是有很多不同的，下面会具体介绍。先附上Beta版源码地址：https://github.com/vuejs/vue-next#status-beta，供大家仔细研读。

Performance

Virtual Dom

相信使用过前端框架React的人，对虚拟Dom应该很熟悉了。它的核心思想就是抽象原生Dom，封装对应操作的API。其中的Diff算法算是核心难点。vue3.0这次优化主要就是在Diff算法上下了很多功夫。它是怎么来实现的呢？主要通过patchflag来标记不同类型的数据，来实现动态数据的动态更新，区分静态数据，这样只会在最开始的时候加载一次，后续编译过程中均直接略过，从而达到提升渲染速度的目的。效果是，upadate的性能提升了1.3~2倍，开启ssr的情况下可以提升2~3倍，所以在性能方面的提升还是很可观的。我们来看下一个代码示例：

开始之前我们先来了解一下 Gatsby.js 是什么。

官网的介绍是：

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.

即 Gatsby 是一个基于 React 的开源框架，基于 Gatsby 开发者能够轻易搭建超快站点。

最近团队的小伙伴基于 Gatsby 开发了几个项目，其优势在于它结合了最新的技术，使开发变得简易快速。但在其便捷的背后不乏踩过的各种坑，今天我们就来分享一些经验，说说那些踩过的坑。

1、CSS 作用域

Gatsby 的 CSS 默认是全局样式，在编写不同页面或者组件的时候需要保证 className 不重复，否则会导致样式覆盖或错乱。

解决办法：

今年 JSConf.Asia 会议上，Vue.js 的作者 @尤雨溪 在关于 前端框架设计取舍 上作了分享。 分享主要从两个部分展开介绍： 职责范围（Scope）和 渲染机制（Render Mechanism）。

职责范围

小的职责范围具有很好的灵活度，但关于构建抽象上要求开发者有自主学习能力。相反，大的职责范围致力于提供抽象概念，倘若抽象不适用，想改变时，却缺乏灵活度。

Vue 在职责范围这个问题的处理方式上，采取了渐进式。

通过渐进的方式来选择特性，让更多的人专注于开发，而不是学习一堆在当前开发中可能不需要的概念。对于当前一些问题，开发者仍然能通过文档来获取一些解决方案。

这种渐进式一来让 Vue 也存在着大职责范围中的统一维护面问题；二来 Vue 生态也无法像小职责范围那样的多样化。