手记

【学习打卡】第七天 Vite零基础快速入门

学习课程名称:Vite零基础快速入门
章节名称:Vite 概念和设计思想
讲师姓名:Tomas


课程内容概述

  1. Vite概念介绍
  2. esm加载对比
  3. Vite和CRA对比

在之前,浏览器中没有模块化的设计,我们需要把所有源代码编译到一个 js 文件中提供给浏览器使用,所以在开发中我们运行启动命令的时候, webpack 需要从入口文件去索引整个项目的文件,编译成一个或多个单独的 js 文件。即使采用了代码拆分,也许要一次生成所有路由下的编译后文件。这就导致了服务启动时间随着项目复杂度而指数级增长。

Vite 所倡导的no-bundle理念的真正含义是利用浏览器原生 ES 模块的支持,实现开发阶段的 Dev Server,进行模块代码的按需加载。浏览器请求对应的 url 的时候,提供对应的文件,一个 import 语句代表一个 HTTP 请求。

这里说的模块代码其实分为两部分:
一部分是源代码,即业务代码,
另一部分是第三方依赖的代码,即node_modules中的代码。
所谓的no-bundle只是对于源代码而言,对于第三方依赖而言,Vite 会进行依赖的预构建。

ES6 Module和CommonJS区别

ES6 Module属于编译时加载,即静态加载,在编译时就能够确定模块的依赖关系,以及输入和输出的变量;CommonJS属于运行时加载,都只有在代码运行时才能确定这些东西。ESM形式的好处是可以做到tree shaking。

ES6 Module可以加载模块的部分内容,CommonJS需要加载模块整个对象,再取到内容。

按照webpack官网的解释,tree shaking通常用于描述移除JavaScript上下文中的未引用代码(dead-code)。它依赖于ESM的静态分析能力,例如import和export。用大白话解释就是,如果是使用模块化开发的话,就可以删除那些引入某个模块中用不到的函数。

为什么叫tree shaking, 我个人觉得这个名次叫的很形象呀。你可以将应用程序想象成一棵树。绿色表示实际用到的源码和 library,是树上活的树叶。灰色表示无用的代码,是秋天树上枯萎的树叶。为了除去死去的树叶,你必须摇动这棵树,使它们落下。


0人推荐
随时随地看视频
慕课网APP