Xrepo

相比esbuild的优势

代码分割和动态导入：rollup 支持高级的代码分割和动态导入功能，这对于现代前端应用尤为重要。它能够处理复杂的导入场景，例如循环依赖和动态模块路径，确保最终打包的文件大小最小且模块之间的依赖正确处理。这些功能在大型应用中可以显著提高加载性能和用户体验。
Tree Shaking：虽然 esbuild 也支持 tree shaking，但 rollup 的 tree shaking 能力通常被认为更为强大和精准。rollup 能够更有效地识别并剔除未使用的代码，这对于减少最终生产包的体积至关重要。
插件生态：rollup 拥有一个成熟且广泛的插件生态系统，这使得开发者可以轻松地扩展其构建过程，以适应各种复杂和特定的构建需求。例如，可以通过插件支持各种 CSS 预处理器、图片优化、国际化等。这种灵活性对于生产环境的构建配置是非常有价值的。
输出控制和优化：rollup 提供了更细粒度的控制输出格式和结构的功能，这对于需要精确控制文件结构和模块化方式的现代应用开发非常重要。例如，rollup 可以生成更为优化的 ES 模块代码，这有助于在现代浏览器中实现更好的性能。
生产优化：虽然 esbuild 的构建速度非常快，但在生产环境中，构建速度虽重要，代码质量和优化程度更为关键。rollup 在这方面提供了更多的优化策略，如更复杂的代码分割和加载策略，这有助于提高应用的性能和可维护性。

manualChunks

可以是一个对象或者函数，每一个键值对表示一个分包

把某些包单独打包成一个文件，可以在这个配置项中设置

json

{
    "vendor": ["vue", "vue-router"]
}

把node_modules中的包打成独立的一个文件

{
    manualChunks(id) {
        if (id.includes('node_modules')) {
            return 'vendor';
        }
    }
}

把node_modules中的包都进行单独打包

{
    manualChunks(id) {
        if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
        }
    }
}

manualChunks ​

manualChunks