模块化打包工具

前端工程化模块化开发

# 模块打包工具的由来

  • ES Modules存在兼容问题
  • 模块文件过多,网络请求频繁
  • 前端应用不仅仅JS的代码需要模块化,其他css等所有前端自由都需要模块化

所以,模块化是有必要的。我们还需要引用更好的工具,去解决上面的问题。

# 打包工具通用功能

这个工具需要:

  1. 开发阶段新特性编译代码
  2. 将散落的模块打包到一起
  3. 需要支持不同种类的资源类型

以webpack为例,其模块打包器(Module bundler),模块加载器(Loader),代码拆分(Code Splitting)进行模块的渐进式加载,资源模块(Asset Module)

这个打包工具解决的是前端整体的模块化,不单指javascript的模块化。

# 模块化打包工具

目前市面上比较火的模块打包工具有:

  • webpack
  • Vite
  • Parcel
  • Rollup

# Webpack 新增

# Vite 新增

# Rollup

# Parcel

# 打包工具选用规则

# Rollup VS Webpack 选用规则

# Rollup优缺点

Rollup 内容
优点 - 输出结果更加扁平,执行效率更高
- 自动移除为引用代码
- 打包结果依然完全可读
缺点 - 加载非ESM的第三方模块比较复杂,需要引用插件
- 模块最终都被打包到一个函数中,无法实现HMR
- 浏览器环境中,代码拆分功能依赖AMD库

# 选用规则

webpack Rollup
如果正在开发应用程序,会面临大量引入第三方模块的需求,也需要HMR这样的功能提升开发体验,应用大了之后必须面临分包 如果正在开发一个框架或者类库,Rollup的优点很有必要,缺点也可以忽略(例如开发类库的时候很少会依赖第三方开发的模块)
所以大多数知名框架/库(vue,react)都在使用Rollup作用模块打包器,并非是webpack

开源社区中,大多数人希望二者并存,共同发展并且可以相互借鉴。

更新时间: 2021-10-11 15:57