vite(一)前端打包工具发展史
现如今前端打包工具最火的无疑是vite!但是vite也不是凭空产生的,而是踩着前人肩膀发展起来的。所以在学习vite之前,有必要了解前端打包工具发展史。
前端打包工具发展史分为哪些阶段?
每一次前端打包工具迭代发展的动力来源于:随着前端的发展,当前的工具无法满足前端的需求。我根据几次前端打包遇到的重大的问题对前端发展史进行划分:
- 后端语言打包阶段( -2009年)
- 文件打包阶段(2009年-2014年)
- Webpack阶段(2014年-2019年)
- Vite阶段(2019年-)
接下来我将对每个阶段进行讲解
一. 后端语言打包阶段( -2009年)
2009年之前,前端刚发展,市面上没有一个为前端开发设计的打包工具。所以这个阶段问题,需求,解决办法:
- 问题:没有为前端开发的打包工具,手动打包费时费力
- 需求:需要自动打包的方法。
- 办法:用 PHP/Python/Java/Ruby/BashScript 写打包脚本,用 make 做构建工具
- 好处:解决了手动打包的困扰
- 痛点:前端必须学一门后端语言
每个阶段的痛点都为新一代打包工具产生提供了方向。
二. 文件打包阶段(2009年-2014年)
为什么这个阶段的开始节点是2009年?
因为,nodejs诞生了,这也意味着前端不在学习需要后端语言就可以操作文件了!
这个阶段代表工具有:Grunt,Gulp等
Grunt
Grunt可以说是一个任务执行器,为什么这么说,看例子:
// Gruntfile.js
grunt.initConfig({jshint: {...}, watch: {files, tasks: ['jshint']}
})grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-qunit);
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);// 在命令行运行 grunt 命令,就会触发 default 任务
grunt语句是由任务任务构成的,操作对象是文件。每个任务官方都定义好了。他有这些特点:
- 问题:之前打包需要学习后端语言。
- 需求:需要简单的打包方法。
- 办法:Grunt通过配置任务,操作文件解决
- 好处:有了简单,配置性的打包办法。
- 痛点:Grunt一次打包由多个任务组成,每个任务都要吞吐文件,多个任务存在重复吞吐文件的情况,性能非常拉胯
Gulp
Gulp是另一个任务执行器,他主要针对Grunt问题做了改进:
// gulpfile.js
const clean = ()=> {...}
const css = ()=> gulp.src('scss/**/*.scss').pipe(sass())...
const jslint = ()=> gulp.src('js/**/*').pipe(...
const minify = ()=> gulp.src('js/**/*').pipe(...
const watch = ()=> {gulp.watch("scss/**/*", css)gulp.watch("js/**/*", gulp.series(jslint, minify))
}
const js = gulp.series(jslint, minify)
const build = gulp.series(clean, gulp.parallel(css, js))exports.css = css
exports.js = js
exports.default = build
- 问题:Grunt打包太慢了
- 需求:想要快速打包的方法
- 办法:Gulp引入管道、流、并行、串行等概念,将操作放在内存,而不是硬盘。
- 好处:有了更快的打包办法。
- 痛点:只是对Grunt进行了优化,本质没有变。当前端开始向模块化发展,特别当react,vue出来,项目文件越来越多。基于文件的操作打包工具越来越吃力。
三. Webpack阶段(2014年-2019年)
Webpack
2014年Webpack发布,这是专门为前端设计开发的打包工具。它有这些特点:
- 问题:前端模块化,文件越来越多,基于文件打包的工具无法满足需求
- 需求:想要一种新的打包工具
- 办法:webpack以打包 JS 为主要功能,不再是任务运行。loader 用于加载文件、plugin 用于扩展功能。提供 webpack-dev-server、热更新
- 好处:极大满足了前端的打包需求,不管多么复杂都能搞定
- 痛点:配置复杂,基本没人能不出错。随着项目变大,大家发现打包越来越慢了。
Rollup
Rollup又一个前端打包器,有着这些特点:
- 问题:webpack太慢了
- 需求:想要一种更快的打包工具
- 办法:面向 ES Modules 而不是 AMD / CommonJS,支Tree-shaking。不提供 dev server,只做生产环境打包
- 好处:打包性能比 Webpack 好
- 痛点:功能不如 Webpack 全,支持生成环境
四. vite阶段
vite是面向下一代的前端构建工具,他有接下来的特点:
- 问题:webpack太慢了,Rollup只支持生成环境打包
- 需求:想要一种生产,开发环境,更简单更快的打包工具
- 办法:开发时,不打包,充分利用浏览器的 module 能力。发布时,用 Rollup 打包
- 好处:开发速度甩 Webpack 十八条街
- 痛点:插件不够多,但问题不大,自己写插件即可。热更新会失灵,但问题不大,自己点刷新即可
至于怎么使用vite,如何开发vite插件,关注我接下来的教程
vite(一)前端打包工具发展史相关推荐
- 前端打包工具rollup、webpack、vite的区别
前端打包工具rollup.webpack.vite的区别 文章目录 前端打包工具rollup.webpack.vite的区别 一.结论 二.rollup 三.webpack 1. 核心概念 2. 重要 ...
- 前端打包工具webpack和Vite
我们见证了 webpack.Rollup 和 Parcel 等工具的变迁,它们极大地改善了前端开发者的开发体验. 但当我们开始构建越来越大型的应用时,通常需要很长时间才能启动开发服务器,文件修改后的效 ...
- 前端打包工具Esbuild--模块化、ESM、esbuild-loader、
模块化编程在前端领域已非常普遍,应用程序中将各种功能细分成独立的模块(单独文件)进行开发.module bundler 将所有文件串联起来变成了必须. JavaScript 社区中有很多程序的打包工具 ...
- 前端打包工具 Esbuild
JavaScript 社区中有很多程序的打包工具,如 Webpack.Rollup.Parcle 等,它们都是使用 JavaScript 开发,性能方面有很多不足. 而 Esbuild,采用 Go 语 ...
- Webpack前端打包工具
1.概述 Webpack 是一个前端资源的打包工具,它可以将js.image.css等资源当成一个模块进行打包. 中文官方网站:https://www.webpackjs.com/ 打包的作用: - ...
- 前端打包工具-webpack和rollup的区别
开门见山 2017年4月初,Facebook 将一个 巨大的 pull 请求 合并到了 React 主分支(master) 中,将其现有的构建流程替换为基于 Rollup ,这一举动 促使 一些人发很 ...
- 我知道的webpack前端打包工具(一)
这些天,毕业那点事,到现在终于能腾出空来了. 今天Eknow想总结的是自身所掌握的webpack知识以及对webpack的一些见解. 先来看一下github对webpack的相关介绍 简单的来讲呢,就 ...
- 下一代前端打包工具-Parcel介绍
Parcel的特性 快速打包 - 多核编译,以及文件系统缓存,即使在重新启动之后也能快速重新构建. 支持JS,CSS,HTML,文件资源等- 不需要安装任何插件. 在需要的时候自动使用Babel,Po ...
- Duo js 一个非常酷的前端打包工具
Duo是下一个包管理生成工具,混合了当今最流行的Component,Browserify,Go等工具的功能与思想,让前端开发更加简单与方便. 本文参考duojs的官网 安装 首先直接从npm安装 np ...
最新文章
- 怎么通过MQTT查看数据是否上云端_干货 | 设备快速上云,轻松搞定设备与云端通信...
- 明略科技完成2亿美元E+轮融资,中俄投资基金领投,腾讯、弘卓资本等跟投
- asp.net core选项配置的研究
- 一棵树,怎么就平衡了(图解AVL+实现)
- 23种设计模式之解释器模式
- Unity 2017 Game Optimization 读书笔记 The Benefits of Batching
- 谷歌浏览器flash崩溃怎么办 Google Chrome flash崩溃解决方法
- Exp-00009错误解決
- 关于PostgreSQL空间膨胀的研究
- 2. node.js 模块管理机制
- 我开通个人博客了~~~~
- C# Wke例子 -- WebUI登录窗口
- 如何检测VC运行库是否安装
- Matlab|基于粒子群优化算法及鲁棒MPPT控制器提高光伏并网的效率
- Android之Manifest文件
- 如何关闭Mybatis的DEBUG log打印
- subversion linux 服务器端搭建 源码安装
- 华为手机卡在升级界面_华为手机停在开机画面的解决方法【图文教程】
- Ubuntu中运行AppImage文件的方法
- 黑苹果oc清除nvram_黑苹果完善之路-英特尔蓝牙「开启/关闭」功能完善教程