Rollup优化实战分享 从配置到插件提升构建效率的全过程

又踩坑了，Rollup打包速度慢得要死

最近在项目中用Rollup打包，发现速度慢得不行，每次改动代码都要等半天。这个体验简直不能忍，必须得优化一下。

排查过程一波三折

首先我怀疑是插件的问题，毕竟Rollup的插件一大堆，每个插件都有可能拖慢打包速度。于是我把所有插件都注释掉，重新打包，结果速度还是慢。这下我就有点懵了，难道是配置出了问题？

折腾了半天发现，可能是@rollup/plugin-node-resolve和@rollup/plugin-commonjs这两个插件的问题。这两个插件虽然常用，但确实容易导致打包变慢。于是我决定先从这两个插件入手。

核心代码就这几行

经过一番折腾，我发现可以通过一些配置来优化这两个插件。首先，@rollup/plugin-node-resolve有一个选项叫preferBuiltins，设置为true可以减少对node_modules的解析次数，从而提升打包速度。

import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    resolve({
      preferBuiltins: true
    })
  ]
};

然后是@rollup/plugin-commonjs，这个插件也有一个选项叫ignore，可以把不需要转换的模块忽略掉，这样也能提升打包速度。

import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    commonjs({
      ignore: ['conditional-runtime-dependency']
    }),
    resolve({
      preferBuiltins: true
    })
  ]
};

最后还有一个小技巧，就是使用cache选项来缓存打包结果，这样下次打包时就可以复用之前的缓存，进一步提升速度。

import { rollup } from 'rollup';

const cache = {};

async function build() {
  const bundle = await rollup({
    input: 'src/main.js',
    cache: cache.current,
    plugins: [
      resolve({
        preferBuiltins: true
      }),
      commonjs({
        ignore: ['conditional-runtime-dependency']
      })
    ]
  });

  cache.current = bundle.cache;

  await bundle.write({
    file: 'dist/bundle.js',
    format: 'iife'
  });
}

build();

技术细节聊聊

@rollup/plugin-node-resolve的作用是解析第三方模块，如果设置了preferBuiltins: true，Rollup会优先使用内置模块而不是node_modules里的模块。这对于依赖大量第三方库的项目来说，能显著减少解析时间。

@rollup/plugin-commonjs的作用是将CommonJS模块转换为ES模块，这样Rollup才能正确处理它们。通过设置ignore选项，可以排除一些不需要转换的模块，减少转换的工作量。

至于cache选项，它的作用是缓存打包过程中的一些中间结果，下次打包时可以直接复用这些缓存，从而加快打包速度。这个选项对于大型项目特别有用，尤其是在开发过程中需要频繁打包的时候。

改完后还有一些小问题

改完这些配置后，打包速度确实快了不少，但还是有一些小问题。比如有时候某些模块的缓存可能会失效，导致需要重新打包。不过总体来说，已经比之前好多了。

以上是我踩坑后的总结，希望对你有帮助。如果你有更好的方案，欢迎评论区交流。