feat(optimizer): support specifying plugins for the optimizer

docs/config/index.md

@@ -419,6 +419,14 @@ export default ({ command, mode }) => {
 
   Dependencies to force exclude in pre-bundling.
 
+### optimizeDeps.plugins
+
+- **Type:** `Plugin[]`
+
+  By default, Vite assumes dependencies ship plain JavaScript and will not attempt to transform non-js file formats during pre-bundling. If you wish to support speical file types, e.g. `.vue` files, you will need to supply the relevant plugins via this option.
+
+  Note that you will also need to include these plugins in the main `plugins` option in order to support the same file types during production build.
+
 ### optimizeDeps.auto
 
 - **Type:** `boolean`

packages/playground/optimize-deps-linked-include/Test.vue

@@ -0,0 +1 @@
+<template>[success] rendered from Vue</template>

packages/playground/optimize-deps-linked-include/index.js

@@ -17,3 +17,5 @@ if (false) {
 } else {
   console.log('ok')
 }
+
+export { default as VueSFC } from './Test.vue'

packages/playground/optimize-deps/__tests__/optimize-deps.spec.ts

@@ -33,3 +33,7 @@ test('forced include', async () => {
 test('dep with css import', async () => {
   expect(await getColor('h1')).toBe('red')
 })
+
+test('dep w/ non-js files handled via plugin', async () => {
+  expect(await page.textContent('.plugin')).toMatch(`[success]`)
+})

packages/playground/optimize-deps/index.html

@@ -21,6 +21,9 @@ <h2>Detecting linked src package and optimizing its deps (lodash-es)</h2>
 <h2>Optimizing force included dep even when it's linked</h2>
 <div class="force-include"></div>
 
+<h2>Dep w/ speical file format supported via plugins</h2>
+<div class="plugin"></div>
+
 <script type="module">
   import axios from 'axios'
 
@@ -31,6 +34,7 @@ <h2>Optimizing force included dep even when it's linked</h2>
   import { camelCase } from 'optimize-deps-linked'
   document.querySelector('.deps-linked').textContent = camelCase('foo-bar-baz')
 
-  import { msg } from 'optimize-deps-linked-include'
+  import { msg, VueSFC } from 'optimize-deps-linked-include'
   document.querySelector('.force-include').textContent = msg
+  document.querySelector('.plugin').textContent = VueSFC.render()
 </script>

packages/playground/optimize-deps/vite.config.js

@@ -1,11 +1,14 @@
+const vue = require('@vitejs/plugin-vue')
+
 /**
  * @type {import('vite').UserConfig}
  */
 module.exports = {
   dedupe: ['react'],
 
   optimizeDeps: {
-    include: ['optimize-deps-linked-include']
+    include: ['optimize-deps-linked-include'],
+    plugins: [vue()]
   },
 
   build: {
@@ -14,6 +17,7 @@ module.exports = {
   },
 
   plugins: [
+    vue(),
     // for axios request test
     {
       name: 'mock',

packages/vite/src/node/config.ts

@@ -161,7 +161,7 @@ export async function resolveConfig(
   const rawUserPlugins = (config.plugins || []).flat().filter((p) => {
     return !p.apply || p.apply === command
   })
-  const [prePlugins, postPlugins, normalPlugins] = sortUserPlugins(
+  const [prePlugins, normalPlugins, postPlugins] = sortUserPlugins(
     rawUserPlugins
   )
 
@@ -345,7 +345,7 @@ export function sortUserPlugins(
     })
   }
 
-  return [prePlugins, postPlugins, normalPlugins]
+  return [prePlugins, normalPlugins, postPlugins]
 }
 
 export async function loadConfigFromFile(

packages/vite/src/node/optimizer/index.ts

@@ -3,7 +3,7 @@ import path from 'path'
 import chalk from 'chalk'
 import Rollup from 'rollup'
 import { createHash } from 'crypto'
-import { ResolvedConfig } from '../config'
+import { ResolvedConfig, sortUserPlugins } from '../config'
 import { SUPPORTED_EXTS } from '../constants'
 import { init, parse } from 'es-module-lexer'
 import { onRollupWarning } from '../build'
@@ -26,6 +26,7 @@ import commonjsPlugin from '@rollup/plugin-commonjs'
 import jsonPlugin from '@rollup/plugin-json'
 import { buildDefinePlugin } from '../plugins/define'
 import { createFilter } from '@rollup/pluginutils'
+import { Plugin } from '../plugin'
 
 const debug = createDebugger('vite:optimize')
 
@@ -38,6 +39,10 @@ export interface DepOptimizationOptions {
    * Do not optimize these dependencies.
    */
   exclude?: string | RegExp | (string | RegExp)[]
+  /**
+   * Plugins to use for dep optimizations.
+   */
+  plugins?: Plugin[]
   /**
    * Automatically run `vite optimize` on server start?
    * @default true
@@ -164,6 +169,8 @@ export async function optimizeDeps(
     logger.info(chalk.greenBright(`Optimizing dependencies:\n${depsString}`))
   }
 
+  const [pre, normal, post] = sortUserPlugins(options.plugins)
+
   try {
     const rollup = require('rollup') as typeof Rollup
 
@@ -175,6 +182,7 @@ export async function optimizeDeps(
       },
       plugins: [
         aliasPlugin({ entries: config.alias }),
+        ...pre,
         depAssetExternalPlugin(config),
         resolvePlugin({
           root: config.root,
@@ -186,13 +194,15 @@ export async function optimizeDeps(
           preferConst: true,
           namedExports: true
         }),
+        ...normal,
         commonjsPlugin({
           include: [/node_modules/],
           extensions: ['.js', '.cjs']
         }),
         buildDefinePlugin(config),
         depAssetRewritePlugin(config),
-        recordCjsEntryPlugin(data)
+        recordCjsEntryPlugin(data),
+        ...post
       ]
     })