（七）什么是Vite——vite优劣势、命令_neterror.rollup.js.map-CSDN博客

Rollup 是一个 JavaScript 模块打包工具，可以将多个小的代码片段编译为完整的库和应用。与传统的 CommonJS 和 AMD 这一类非标准化的解决方案不同，Rollup 使用的是 ES6 版本 Javascript 中的模块标准。新的 ES 模块可以让你自由、无缝地按需使用你最喜爱的库中那些有用的单个函数。这一特性在未来将随处可用，但 Rollup 让你现在就可以，想用就用。

Rollup 是基于 ESM 的 JavaScript 打包工具。相比于其他打包工具如 Webpack ，他总是能打出更小、更快的包。因为 Rollup 基于 ESM 模块，比 Webpack 和 Browserify 使用的 CommonJS模块机制更高效。

Rollup的亮点在于同一个地方，一次性加载。能针对源码进行 Tree Shaking(去除那些已被定义但没被使用的代码)，以及 Scope Hoisting 以减小输出文件大小提升运行性能。

Rollup分为 build（构建）阶段和 output generate（输出生成）阶段。主要过程如下：

获取入口文件的内容，包装成 module，生成抽象语法树

对入口文件抽象语法树进行依赖解析

生成最终代码

写入目标文件

这里想对Rollp进行更深入的学习可以看看 rollup.js 中文文档 | rollup.js中文网

Rollup插件机制：

Rollup 的打包过程中，会定义一套完整的构建生命周期，从开始打包到产物输出，中途会经历一些标志性的阶段，并且在不同阶段会自动执行对应的插件钩子函数(Hook)。

Vite 的插件机制是基于 Rollup 来设计的。Vite 模拟了 Rollup 的插件机制，设计了一个 PluginContainer 对象来调度各个插件。

PluginContainer 的实现基于借鉴于 WMR 中的rollup-plugin-container.js，主要分为 2 个部分:

1、实现 Rollup 插件钩子的调度
2、实现插件钩子内部的 Context 上下文对象

PluginContainer的定义了一系列执行plugin的方法。如buildStart、resolveId、load、transform。

经验法则：对于应用使用 webpack，对于类库使用 Rollup。

如果你的项目（特别是类库）只有JavaScript，而没有其他的静态资源文件，使用Webpack就有点大才小用了。因为Webpack 打包的文件的体积略大，运行略慢，可读性略低。这时候Rollup也不失为一个好选择。如果您的代码库是基于 ES2015 模块的，而且希望你写的代码能够被其他人直接使用，你需要的打包工具可能是 Rollup 。

如果你需要代码拆分(Code Splitting)，或者你有很多静态资源需要处理，再或者你构建的项目需要引入很多CommonJS模块的依赖，那么 webpack 是个很不错的选择。

小结：

webpack 是一个全能选手，啥都能干，只是有点复杂，对新手不太友好。

Rollup 是后起之秀，打包更简洁。

vite 把 rollup 变成了“开袋即食”，便于新手入门。

create-vue 基本取代了 vue-cli，除非你想创建 vue2 的项目。

所以，想创建一个 vue3 的项目，首选 create-vue，非常方便快捷，建立的项目也可以统一风格。

Vite 优势：

1. vite 开发服务器启动速度比 webpack 快（快速的冷启动）

webpack 会先打包，然后启动开发服务器，请求服务器时直接给予打包结果，如果项目规模庞大，打包时间必然很长。

由于现代浏览器本身就支持ES Module，会自动向依赖的Module发出请求。vite充分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack那样进行打包合并。所以，Vite只启动一台静态页面的服务器，不会打包全部项目文件代码，服务器根据客户端的请求加载不同的模块处理，实现按需加载。而 vite 在启动开发服务器时不需要打包，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快。当浏览器请求某个模块时，再根据需要对模块内容进行编译。这种按需动态编译的方式，极大的缩减了编译时间，项目越复杂、模块越多，vite的优势越明显。

2. vite 热更新比 webpack 快（快速的热更新）

在 HMR 方面，当改动了一个模块后，vite仅需让浏览器重新请求该模块即可，不像webpack那样需要把该模块的相关依赖模块全部编译一次，效率更高。

3. vite 使用esbuild(Go 编写) 预构建依赖，比 webpack 的 nodejs，快 10-100 倍。

4.-unbundle 机制的核心:

模块之间的依赖关系的解析由浏览器实现；
文件的转换由 dev server 的 middlewares 实现并做缓存；
不对源文件做合并捆绑操作；

Vite 劣势：

1. 打包到生产环境时，vite使用传统的 rollup（也可以自己手动安装webpack来）进行打包，所以，vite的优势是体现在开发阶段；

2. 项目的开发浏览器要支持 ES Module，而且不能识别 CommonJS 语法；

3.一些第三方 sdk 没有产出 ems 格式的的代码，这个需要自己去做一些兼容；

4.由于 unbundle 机制，首屏期间、懒加载方面需要额外做以下工作:和 Webpack 对比，Vite 把需要在 dev server 启动过程中完成的工作，转移到了 dev server 响应浏览器请求的过程中，不可避免的导致首屏性能下降。不过首屏性能差只发生在 dev server 启动以后第一次加载页面时发生。之后再 reload 页面时，首屏性能会好很多。原因是 dev server 会将之前已经完成转换的内容缓存起来。

不对源文件做合并捆绑操作，导致大量的 http 请求；
dev server 运行期间对源文件做 resolve、load、transform、parse 操作；
预构建、二次预构建操作也会阻塞首屏请求，直到预构建完成为止。

命令行界面

开发服务器

vite #

在当前目录下启动 Vite 开发服务器。

使用

vite [root]

选项

选项
--host [host]	指定主机名称 ( string )
--port	指定端口 ( number )
--https	使用 TLS + HTTP/2 ( boolean )
--open [path]	启动时打开浏览器 ( boolean \| string )
--cors	启用 CORS ( boolean )
--strictPort	如果指定的端口已在使用中，则退出 ( boolean )
--force	强制优化器忽略缓存并重新构建 ( boolean )
-c, --config	使用指定的配置文件 ( string )
--base	公共基础路径（默认为：/ ）( string )
-l, --logLevel	Info \| warn \| error \| silent ( string )
--clearScreen	允许或禁用打印日志时清除屏幕 ( boolean )
-d, --debug [feat]	显示调试日志 ( string \| boolean )
-f, --filter	过滤调试日志 ( string )
-m, --mode	设置环境模式 ( string )
-h, --help	显示可用的 CLI 选项
-v, --version	显示版本号

构建

vite build #

构建生产版本。

使用

vite build [root]

选项

选项
--target	编译目标（默认为： "modules" ）( string )
--outDir	输出目录（默认为： dist ）( string )
--assetsDir	在输出目录下放置资源的目录（默认为： "assets" ）( string )
--assetsInlineLimit	静态资源内联为 base64 编码的阈值，以字节为单位（默认为： 4096 ）( number )
--ssr [entry]	为服务端渲染配置指定入口文件 ( string )
--sourcemap [output]	构建后输出 source map 文件（默认为： false ）( boolean \| "inline" \| "hidden" )
--minify [minifier]	允许或禁用最小化混淆，或指定使用哪种混淆器（默认为： "esbuild" ）( boolean \| "terser" \| "esbuild" )
--manifest [name]	构建后生成 manifest.json 文件 ( boolean \| string )
--ssrManifest [name]	构建后生成 SSR manifest.json 文件 ( boolean \| string )
--force	强制优化器忽略缓存并重新构建（实验性）( boolean )
--emptyOutDir	若输出目录在根目录外，强制清空输出目录 ( boolean )
-w, --watch	在磁盘中模块发生变化时，重新构建 ( boolean )
-c, --config	使用指定的配置文件 ( string )
--base	公共基础路径（默认为： / ）( string )
-l, --logLevel	Info \| warn \| error \| silent ( string )
--clearScreen	允许或禁用打印日志时清除屏幕 ( boolean )
-d, --debug [feat]	显示调试日志 ( string \| boolean )
-f, --filter	过滤调试日志 ( string )
-m, --mode	设置环境模式 ( string )
-h, --help	显示可用的 CLI 选项

其他

vite optimize #

预构建依赖。

使用

vite optimize [root]

选项

选项
--force	强制优化器忽略缓存并重新构建 ( boolean )
-c, --config	使用指定的配置文件 ( string )
--base	公共基础路径（默认为： / ）( string )
-l, --logLevel	Info \| warn \| error \| silent ( string )
--clearScreen	允许或禁用打印日志时清除屏幕 ( boolean )
-d, --debug [feat]	显示调试日志 ( string \| boolean )
-f, --filter	过滤调试日志 ( string )
-m, --mode	设置环境模式 ( string )
-h, --help	显示可用的 CLI 选项

vite preview #

本地预览构建产物。不要将其用作生产服务器，因为它不是为此而设计的。

使用

vite preview [root]

选项

选项
--host [host]	指定主机名称 ( string )
--port	指定端口 ( number )
--strictPort	如果指定的端口已在使用中，则退出 ( boolean )
--https	使用 TLS + HTTP/2 ( boolean )
--open [path]	启动时打开浏览器 ( boolean \| string )
--outDir	输出目录（默认为： dist )( string )
-c, --config	使用指定的配置文件 ( string )
--base	公共基础路径（默认为： / ）( string )
-l, --logLevel	Info \| warn \| error \| silent ( string )
--clearScreen	允许或禁用打印日志时清除屏幕 ( boolean )
-d, --debug [feat]	显示调试日志 ( string \| boolean )
-f, --filter	过滤调试日志 ( string )
-m, --mode	设置环境模式 ( string )
-h, --help	显示可用的 CLI 选项