Vue3 源码分析 02 - 框架设计的核心要素

大家也可以去我的博客看相关技术文章,欢迎大家,一同进步!!!!

vue3 源码分析,第二章 框架设计的核心要素

目录

控制代码体积

环境变量

js 复制代码
if (__DEV__ && !res) {
  warn(
    `Failed to mount app: mount target selector "${container}" returned null.`
  );
}

这里的__DEV__就是环境变量,vue构建生产资源的时候就会移除掉这部分,因为他是dead code永远不会执行

tree-shaking

Tree-Shaking 指的就是消除那些永远不会被执行的代码,也就是排除 dead code,现在无论是 rollup.js 还是 webpack,都支持 Tree-Shaking。

  • Tree-Shaking 只对 ES Module 有效
  • Tree-Shaking 依赖静态的模块结构

构建不同的产物

  • 生产环境的 vue.global.prod.js 不含警告信息
  • 开发环境的 vue.global.js,包含必要警告信息

这是构建产物基于环境的输出,除此之外还有别的,而这些构建产物都是基于对应的需求

直接使用<script>标签 - IIFE

有时候,我们可能html直接使用<script>标签,使用vue,此时我们需要IIFE

直接使用<script>标签 - ES Module

html 复制代码
<script type="module" src="/path/to/vue.esm-browser.js"></script>

随着技术的发展和浏览器的支持,现在主流浏览器对原生 ESM的支持都不错,所以用户除了能够使用 <script> 标签引用 IIFE 格式的资源外,还可以直接引入 ESM 格式的资源,例如 Vue.js 3 还会 输出 vue.esm-browser.js 文件,用户可以模块引入

同时补充 ESModule的构建产物也有两种 给浏览器环境,和给打包工具的

  • 浏览器 esm-browser.js
  • 打包工具 esm-bundler.js

node端使用 - cjs

服务端渲染SSR, 会使用到cjs格式的构建产物

特性开关

本质上是利用rollup.js的预定义常量插件来实现

js 复制代码
if (__VUE_OPTIONS_API__) {
  currentInstance = instance;
  pauseTracking();
  applyOptions(instance, Component);
  resetTracking();
  currentInstance = null;
}

错误处理

js 复制代码
// utils.js
let handleError = null;
export default {
  foo(fn) {
    callWithErrorHandling(fn);
  },
  // 用户可以统一注册错误处理函数
  registerErrorHandler(fn) {
    handleError = fn;
  },
};
function callWithErrorHandling(fn) {
  try {
    fn && fn();
  } catch (e) {
    // 将捕获到的错误传递给用户的错误处理程序
    handleError(e);
  }
}

使用

js 复制代码
import utils from "./utils";
utils.registerErrorHandler(e => {
  console.error(e);
});

vue中的

js 复制代码
import App from "App.vue";
const app = createApp(App);
app.config.errorHandler = () => {
  // 错误处理程序
};

类型支持

采用 Typescript

总结

  • tree-sharing 基于 ESM 实现
  • 基于需求会有各种的构建产物
    • 浏览器 esm-browser.js
    • 打包工具 esm-bundler.js
  • 特性开关
  • 统一的错误处理接口
  • 类型支持
相关推荐
ze_juejin9 分钟前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js
小样还想跑2 小时前
axios无感刷新token
前端·javascript·vue.js
用户3802258598242 小时前
vue3源码解析:响应式机制
前端·vue.js
时间会给答案scidag2 小时前
报错 400 和405解决方案
vue.js·spring boot
白杨木影子被拉长2 小时前
多状态映射不同样式(scss语法)
vue.js·uni-app
长路 ㅤ   3 小时前
前端技术博客汇总文档
javascript·vue.js·css3·html5·前端技术
Jinxiansen02114 小时前
unplugin-vue-components 最佳实践手册
前端·javascript·vue.js
婉婉耶4 小时前
VUE带你乘风破浪~
前端·vue.js
乌兰麦朵5 小时前
Vue吹的颅内高潮,全靠选择性失明和 .value 的PUA!
前端·vue.js
Goodbaibaibai5 小时前
创建一个简洁的Vue3 + TypeScript + Vite + Pinia + Vue Router项目
javascript·vue.js·typescript