Vite

一、Vite生产环境为什么选择Rollup做构建工具

Vite是一个由原生ESM驱动的Web开发构建工具。在选择构建工具的时候也最好可以选择基于ESM的工具。 Rollup是基于ES2015的JavaScript打包工具。它将小文件打包成一个大文件或者更复杂的库和应用，打包既可用于浏览器和Node.js使用。 Rollup最显著的地方就是能让打包文件体积很小。相比其他JavaScript打包工具，Rollup总能打出更小，更快的包。因为Rollup基于ES2015模块，比Webpack和Browserify使用的CommonJS模块机制更高效。

二、Vite为什么不用Rollup的热更新

Vite开发模式单独实现了一套热更新（HMR - Hot Module Replacement），可是从Rollup Awesome中可以发现，Rollup有热更新插件nollup。为什么Vite不用Rollup的热更新呢？ 从Vite的README，我们可以发现：

Vite was created to tackle native ESM-based HMR. When Vite was first released with working ESM-based HMR, there was no other project actively trying to bring native ESM based HMR to production.

也就是说Vite是第一个发布基于纯ESM的热更新。当时Rollup还没有纯ESM的热更新。

三、Vite为什么不用Webpack

Webpack和Rollup功能差不多，以前有种说法是应用开发用Webpack，库开发用Rollup。但是现在Webpack也支持Tree shaking，Rollup也有热更新，而且都有强大的插件开发功能。二者的功能差异越来越模糊。 二者更多的区别是在写法上。 如下是Rollup的配置文件：

import babel from 'rollup-plugin-babel';

export default {
    input: './src/index.js',
    output: {
        file: './dist/bundle.rollup.js',
        format: 'cjs'
    },
    plugins: [
        babel({
            presets: [
                [
                    'es2015', {
                        modules: false
                    }
                ]
            ]
        })
    ]
}

下面是webpack的配置文件：

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: {
        'index.webpack': path.resolve('./src/index.js')
    },
    output: {
        libraryTarget: "umd",
        filename: "bundle.webpack.js",
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            }
        ]
    }
};

可以看出：

• Rollup使用新的ESM，而Webpack用的是旧的CommonJS。
• Rollup支持相对路径，webpack需要使用path模块。

Rollup使用起来更简洁，并且Rollup打出更小体积的文件，所以Rollup更适合Vite。

四. 为什么生成环境仍需打包？

因为嵌套导入会导致额外的网络往返，造成网络堵塞，发布未打包的ESM仍然效率低下。为了获得更好的性能，最后呢，还是将代码进行tree-shaking、懒加载、chunk分割（获得更好的缓存）等操作

五. 为什么不用ESBuild打包？

因为ESBuild针对构建应用的一些重要功能还在开发当中，特别是代码分割，css处理方面；目前来说，Rollup在应用打包方面更加成熟和灵活，但是官方表示在这些功能稳定之后也不排除使用ESBuild作为生产构建工具

推荐学习文章

1. Vite介绍及实现原理