Vite: How to speed up build with large dependency?

Question

I'm developing a chrome extension so I need to use vite build and can't use vite dev.

I'm trying to use the monaco-editor. Even when I'm careful to only use a minimal monaco setup, build time increases from a nice 0.6s to annoying 5.6s.

Is there any way to speed that up?

What should be possible is to create a separate vite configuration only to build the monaco dependency (which doesn't change much), and that provides a window.setupMonaco() used by my project, so my project doesn't need to build any monaco code at all. What would be the most elegant way to do that using vite?

I've also considered fixing build time by conditionally not including monaco by using resolve.alias to create an @editor alias so I can provide a non-monaco (faster-to-build) editor implementation based on an environment variable when developing on non-monaco-related code.

I've also tried using some vite options, but they don't seem to make much difference:

// Setting FASTER=1 really doesn't do much
const fasterConfig = process.env.FASTER ?
  {
    sourcemap: false,
    minify: false,
    cleanCssOptions: { sourceMap: false },
    rollupOptions: { treeshake: false },
  } : {}

// https://vitejs.dev/config/
export default defineConfig({
  ...fasterConfig,

Vite: How to speed up build with large dependency?

0 Answers0