做公司网站的平台,西安建设工程招投标信息网,上海造价信息网官网,昌大建设集团是哪里的一、模块化工具
模块化是一种处理复杂系统分解为更好的可管理模块的方式
可以用来分割#xff0c;组织和打包应用。每个模块完成一个特定的子功能#xff0c;所有的模块按某种方法组装起来#xff0c;成为一个整体(bundle)
在前端领域中#xff0c;并非只有webpack这一款… 一、模块化工具
模块化是一种处理复杂系统分解为更好的可管理模块的方式
可以用来分割组织和打包应用。每个模块完成一个特定的子功能所有的模块按某种方法组装起来成为一个整体(bundle)
在前端领域中并非只有webpack这一款优秀的模块打包工具还有其他类似的工具例如Rollup、Parcel、snowpack以及最近风头无两的Vite
通过这些模块打包工具能够提高我们的开发效率减少开发成本
这里没有提及gulp、grunt是因为它们只是定义为构建工具不能类比
Rollup
Rollup 是一款 ES Modules 打包器从作用上来看Rollup 与 Webpack 非常类似。不过相比于 WebpackRollup要小巧的多
现在很多我们熟知的库都都使用它进行打包比如Vue、React和three.js等
举个例子
// ./src/messages.js
export default {hi: Hey Guys, I am zce~
}// ./src/logger.js
export const log msg {console.log(---------- INFO ----------)console.log(msg)console.log(--------------------------)
}export const error msg {console.error(---------- ERROR ----------)console.error(msg)console.error(---------------------------)
}// ./src/index.js
import { log } from ./logger
import messages from ./messages
log(messages.hi)然后通过rollup进行打包 $ npx rollup ./src/index.js --file ./dist/bundle.js 打包结果如下图 可以看到代码非常简洁完成不像webpack那样存在大量引导代码和模块函数
并且error方法由于没有被使用输出的结果中并无error方法可以看到rollup默认开始Tree-shaking 优化输出结果
因此可以看到Rollup的优点
代码效率更简洁、效率更高默认支持 Tree-shaking
但缺点也十分明显加载其他类型的资源文件或者支持导入 CommonJS 模块又或是编译 ES 新特性这些额外的需求 Rollup需要使用插件去完成
综合来看rollup并不适合开发应用使用因为需要使用第三方模块而目前第三方模块大多数使用CommonJs方式导出成员并且rollup不支持HMR使开发效率降低
但是在用于打包JavaScript 库时rollup比 webpack 更有优势因为其打包出来的代码更小、更快其存在的缺点可以忽略
Parcel
Parcel 是一款完全零配置的前端打包器它提供了 “傻瓜式” 的使用体验只需了解简单的命令就能构建前端应用程序
Parcel 跟 Webpack 一样都支持以任意类型文件作为打包入口但建议使用HTML文件作为入口该HTML文件像平时一样正常编写代码、引用资源。如下所示
!-- ./src/index.html --
!DOCTYPE html
html langen
headmeta charsetUTF-8titleParcel Tutorials/title
/head
bodyscript srcmain.js/script
/body
/htmlmain.js文件通过ES Moudle方法导入其他模块成员
// ./src/main.js
import { log } from ./logger
log(hello parcel)
// ./src/logger.js
export const log msg {console.log(---------- INFO ----------)console.log(msg)
}运行之后使用命令打包 npx parcel src/index.html 执行命令后Parcel不仅打包了应用同时也启动了一个开发服务器跟webpack Dev Server一样
跟webpack类似也支持模块热替换但用法更简单
同时Parcel有个十分好用的功能支持自动安装依赖像webpack开发阶段突然使用安装某个第三方依赖必然会终止dev server然后安装再启动。而Parcel则免了这繁琐的工作流程
同时Parcel能够零配置加载其他类型的资源文件无须像webpack那样配置对应的loader
打包命令如下 npx parcel src/index.html 由于打包过程是多进程同时工作构建速度会比Webpack 快输出文件也会被压缩并且样式代码也会被单独提取到单个文件中 可以感受到Parcel给开发者一种很大的自由度只管去实现业务代码其他事情用Parcel解决
Snowpack
Snowpack是一种闪电般快速的前端构建工具专为现代Web设计较复杂的打包工具如Webpack或Parcel的替代方案利用JavaScript的本机模块系统避免不必要的工作并保持流畅的开发体验
开发阶段每次保存单个文件时Webpack和Parcel都需要重新构建和重新打包应用程序的整个bundle。而Snowpack为你的应用程序每个文件构建一次就可以永久缓存文件更改时Snowpack会重新构建该单个文件
下图给出webpack与snowpack打包区别 在重新构建每次变更时没有任何的时间浪费只需要在浏览器中进行HMR更新
Vite
vite 是一种新型前端构建工具能够显著提升前端开发体验
它主要由两部分组成
一个开发服务器它基于 原生 ES 模块 提供了丰富的内建功能如速度快到惊人的 [模块热更新HMR一套构建指令它使用 Rollup打包你的代码并且它是预配置的可以输出用于生产环境的优化过的静态资源
其作用类似webpack webpack-dev-server其特点如下
快速的冷启动即时的模块热更新真正的按需编译
vite会直接启动开发服务器不需要进行打包操作也就意味着不需要分析模块的依赖、不需要编译因此启动速度非常快
利用现代浏览器支持ES Module的特性当浏览器请求某个模块的时候再根据需要对模块的内容进行编译这种方式大大缩短了编译时间
原理图如下所示 在热模块HMR方面当修改一个模块的时候仅需让浏览器重新请求该模块即可无须像webpack那样需要把该模块的相关依赖模块全部编译一次效率更高
#webpack
相比上述的模块化工具webpack大而全很多常用的功能做到开箱即用。有两大最核心的特点一切皆模块和按需加载
与其他构建工具相比有如下优势
智能解析对 CommonJS 、 AMD 、ES6 的语法做了兼容万物模块对 js、css、图片等资源文件都支持打包开箱即用HMR、Tree-shaking等功能代码分割可以将代码切割成不同的 chunk实现按需加载降低了初始化时间插件系统具有强大的 Plugin 接口具有更好的灵活性和扩展性易于调试支持 SourceUrls 和 SourceMaps快速运行webpack 使用异步 IO 并具有多级缓存这使得 webpack 很快且在增量编译上更加快生态环境好社区更丰富出现的问题更容易解决
