从ES Modules和CommonJs层面讲vite和 webpack区别

227 阅读3分钟

commonJs 和 ES Module

简单理解commonJs 和 ES Module的规范

CommonJs是通过 module.exports , exports 进行导出, require引入

ES Module是通过 export default, export const, export {}进行导出, import {}, import引入

区别

commonJs支持动态的引入, ES Module是静态

动态引入

    let lists: string[] = ['./index.js', './home.js'] 
    lists.forEach(url => { requrie(url)  }) //动态引入
    if(list.length) requrie(list[0]) // 动态引入

ES Module语句 import只能声明在该文件的最顶部 不能动态增加语句, 因为ES Module语句运行在代码编译时候。

if(true) import xxx from 'xxx' //报错

导入值的变化

CommonJS是拷贝之后导出的值, 更改完num没有发生变化,但是导入的数值可以修改。

// index.ts 
let num: number = 0 
module.export = { num, add() { ++num } } 
//bundle.ts 
let {num, add} = require('./index.js') console.log(num) // 0 
add() 
console.log(num) //0 
num = 10

CommonJs解决了变量污染,文件依赖等问题,上面我们也介绍了它的基本语法,它可以动态导入(代码发生在运行时),不可以重复导入。

ES Module导出的值是值的引用,并且内部具有映射关系,这是export关键字的作用。并且导入的值,不能进行修改,只是readonly状态

// index.js 
export let num = 0; 
export function add() { ++ num } 
// bundle.js 
import {num ,add} from './index.js' 
console.log(num) //0 
add() 
console.log(num) // 1 
num = 10 // 抛出错误

CommonJs和Es Module的区别

CommonJs

  • CommonJs可以动态加载语句,代码发生在运行时
  • CommonJs混合导出,还是一种语法,只不过不用声明前面对象而已,当我导出引用对象时之前的导出就被覆盖了
  • CommonJs导出值是拷贝,可以修改导出的值,这在代码出错时,不好排查引起变量污染

Es Module

  • Es Module是静态的,不可以动态加载语句,只能声明在该文件的最顶部,代码发生在编译时
  • Es Module混合导出,单个导出,默认导出,完全互不影响
  • Es Module导出是引用值之前都存在映射关系,并且值都是可读的,不能修改

vite 和 webpack区别

开发阶段vite的速度远快于webpack,主要是因为:

webpack是先打包再启动开发服务器,vite是直接启动开发服务器,然后按需编译依赖文件。

下面详细来说:

  • webpack先打包,再启动开发服务器,请求服务器时直接给予打包后的结果;
  • vite直接启动开发服务器,请求哪个模块再对哪个模块进行实时编译;
  • 由于现代浏览器本身就支持ES Modules,会主动发起请求去获取所需文件。vite充分利用这点,将开发环境下的模块文件,就作为浏览器要执行的文件,而不是像webpack先打包,交给浏览器执行的文件是打包后的;
  • 由于vite启动的时候不需要打包,也就无需分析模块依赖、编译,所以启动速度非常快。当浏览器请求需要的模块时,再对模块进行编译,这种按需动态编译的模式,极大缩短了编译时间,当项目越大,文件越多时,vite的开发时优势越明显;
  • 在HRM(热更新)方面,当某个模块内容改变时,让浏览器去重新请求该模块即可,而不是像webpack重新将该模块的所有依赖重新编译;
  • 当需要打包到生产环境时,vite使用传统的rollup进行打包,所以,vite的优势是体现在开发阶段,另外,由于vite使用的是ES Module,所以代码中不可以使用CommonJs;