wip: vite optimize

package.json

@@ -55,7 +55,7 @@
   },
   "dependencies": {
     "@babel/parser": "^7.9.4",
-    "@rollup/plugin-commonjs": "^11.1.0",
+    "@rollup/plugin-commonjs": "11.0.2",
     "@rollup/plugin-json": "^4.0.3",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@types/koa": "^2.11.3",
@@ -105,6 +105,7 @@
     "cross-env": "^7.0.2",
     "jest": "^25.4.0",
     "lint-staged": "^10.1.6",
+    "lodash-es": "^4.17.15",
     "npm-run-all": "^4.1.5",
     "postcss-nesting": "^7.0.1",
     "preact": "^10.4.1",

playground/TestModuleResolve.vue

@@ -4,6 +4,9 @@
     vue-router@next {{ router }}
   </div>
   <div class="module-resolve-store" :class="store">vuex@next {{ store }}</div>
+  <div class="module-resolve-optimize" :class="optResolve">
+    optimized {{ optResolve }}
+  </div>
   <div class="module-resolve-web" :class="web_modules">
     web_modules {{ web_modules }}
   </div>
@@ -15,6 +18,7 @@
 <script>
 import { createRouter } from 'vue-router'
 import { createStore } from 'vuex'
+import { add } from 'lodash-es'
 import { dep } from 'web-modules-dep'
 import { foo } from './util'
 
@@ -23,6 +27,7 @@ export default {
     return {
       router: typeof createRouter === 'function' ? 'ok' : 'error',
       store: typeof createStore === 'function' ? 'ok' : 'error',
+      optResolve: typeof add === 'function' ? 'ok' : 'error',
       web_modules: dep() ? 'ok' : 'error',
       indexResolve: foo() ? 'ok' : 'error'
     }

src/node/build/buildPluginResolve.ts

@@ -3,7 +3,10 @@ import fs from 'fs-extra'
 import { hmrClientId } from '../server/serverPluginHmr'
 import { InternalResolver } from '../resolver'
 import { resolveVue } from '../utils/resolveVue'
-import { resolveWebModule } from '../server/serverPluginModuleResolve'
+import {
+  resolveWebModule,
+  resolveOptimizedModule
+} from '../server/serverPluginModuleResolve'
 
 const debug = require('debug')('vite:build:resolve')
 
@@ -31,7 +34,11 @@ export const createBuildResolvePlugin = (
           return resolved
         }
       } else if (!id.startsWith('.')) {
-        const webModulePath = await resolveWebModule(root, id)
+        const optimizedModule = resolveOptimizedModule(root, id)
+        if (optimizedModule) {
+          return optimizedModule
+        }
+        const webModulePath = resolveWebModule(root, id)
         if (webModulePath) {
           return webModulePath
         }

src/node/optimizer.ts

@@ -3,6 +3,7 @@ import path from 'path'
 import { createHash } from 'crypto'
 import { ResolvedConfig } from './config'
 import type Rollup from 'rollup'
+import resolveFrom from 'resolve-from'
 import { supportedExts } from './resolver'
 
 export interface OptimizeOptions extends ResolvedConfig {
@@ -28,6 +29,7 @@ export async function optimize(config: OptimizeOptions) {
     }
   }
 
+  await fs.remove(cacheDir)
   await fs.ensureDir(cacheDir)
   await fs.writeFile(hashPath, depHash)
 
@@ -45,9 +47,24 @@ export async function optimize(config: OptimizeOptions) {
   }
 
   console.log(`optimizing dependencies...`)
-  const rollup = require('rollup') as typeof Rollup
 
-  await rollup.rollup({
+  const entriesToNameMap = new Map()
+  depKeys.forEach((id) => {
+    // TODO:
+    // - check if the package is installed
+    // - check if it has module entry
+    // - if it has module entry, scan it with es-module-lexer to see if it
+    //   imports other files
+    // - if it does, bundle it...
+
+    // Problem: users may do deep import from dependencies which are not
+    // bundled, e.g. lodash-es/cloneDeep <-- maybe we still need a scan? But
+    // the scan would be quite expensive...
+    entriesToNameMap.set(resolveFrom(root, id), id)
+  })
+
+  const rollup = require('rollup') as typeof Rollup
+  const bundle = await rollup.rollup({
     input: depKeys,
     plugins: [
       require('@rollup/plugin-node-resolve')({
@@ -57,8 +74,25 @@ export async function optimize(config: OptimizeOptions) {
       require('@rollup/plugin-commonjs')({
         sourceMap: false
       })
-    ]
+    ],
+    onwarn(warning, warn) {
+      if (warning.code !== 'CIRCULAR_DEPENDENCY') {
+        warn(warning)
+      }
+    }
   })
+
+  const { output } = await bundle.generate({
+    format: 'es'
+  })
+
+  for (const chunk of output) {
+    if (chunk.type === 'chunk') {
+      const id = entriesToNameMap.get(chunk.facadeModuleId)
+      const fileName = id ? id + '.js' : chunk.fileName
+      await fs.writeFile(path.join(cacheDir, fileName), chunk.code)
+    }
+  }
 }
 
 const lockfileFormats = [

src/node/resolver.ts

@@ -64,7 +64,7 @@ const resolveExt = (id: string) => {
     const queryMatch = id.match(/\?.*$/)
     const query = queryMatch ? queryMatch[0] : ''
     const reoslved = cleanId + inferredExt + query
-    debug(`ext: ${id} -> ${reoslved}`)
+    debug(`(extension) ${id} -> ${reoslved}`)
     return reoslved
   }
   return id

src/node/server/serverPluginModuleResolve.ts

@@ -53,36 +53,66 @@ export const moduleResolvePlugin: ServerPlugin = ({ root, app, watcher }) => {
       return serve(id, cachedPath, 'cached')
     }
 
+    // resolve from vite optimized modules
+    const optimized = resolveOptimizedModule(root, id)
+    if (optimized) {
+      return serve(id, optimized, 'optimized')
+    }
+
     // resolve from web_modules
-    try {
-      const webModulePath = resolveWebModule(root, id)
-      if (webModulePath) {
-        return serve(id, webModulePath, 'web_modules')
-      }
-    } catch (e) {
-      console.error(
-        chalk.red(`[vite] Error while resolving web_modules with id "${id}":`)
-      )
-      console.error(e)
-      ctx.status = 404
+    const webModulePath = resolveWebModule(root, id)
+    if (webModulePath) {
+      return serve(id, webModulePath, 'web_modules')
     }
 
-    // resolve from node_modules
     try {
       // we land here after a module entry redirect
       // or a direct deep import like 'foo/bar/baz.js'.
       const file = resolve(root, id)
       return serve(id, file, 'node_modules')
     } catch (e) {
-      console.error(
-        chalk.red(`[vite] Error while resolving node_modules with id "${id}":`)
-      )
+      console.error(chalk.red(`[vite] Error while resolving /@modules/${id} :`))
       console.error(e)
       ctx.status = 404
     }
   })
 }
 
+export function resolveBareModule(root: string, id: string) {
+  const optimized = resolveOptimizedModule(root, id)
+  if (optimized) {
+    return id + '.js'
+  }
+  const web = resolveWebModule(root, id)
+  if (web) {
+    return id + '.js'
+  }
+  const nodeEntry = resolveNodeModuleEntry(root, id)
+  if (nodeEntry) {
+    return nodeEntry
+  }
+  return id
+}
+
+const viteOptimizedMap = new Map()
+
+export function resolveOptimizedModule(
+  root: string,
+  id: string
+): string | undefined {
+  const cached = viteOptimizedMap.get(id)
+  if (cached) {
+    return cached
+  }
+
+  if (!id.endsWith('.js')) id += '.js'
+  const file = path.join(root, `node_modules`, `.vite`, id)
+  if (fs.existsSync(file)) {
+    viteOptimizedMap.set(id, file)
+    return file
+  }
+}
+
 const webModulesMap = new Map()
 
 export function resolveWebModule(root: string, id: string): string | undefined {
@@ -101,10 +131,7 @@ export function resolveWebModule(root: string, id: string): string | undefined {
 
 const idToEntryMap = new Map()
 
-export function resolveNodeModuleEntry(
-  root: string,
-  id: string
-): string | undefined {
+function resolveNodeModuleEntry(root: string, id: string): string | undefined {
   const cached = idToEntryMap.get(id)
   if (cached) {
     return cached

src/node/server/serverPluginModuleRewrite.ts

@@ -26,10 +26,7 @@ import {
   resolveRelativeRequest
 } from '../utils'
 import chalk from 'chalk'
-import {
-  resolveNodeModuleEntry,
-  resolveWebModule
-} from './serverPluginModuleResolve'
+import { resolveBareModule } from './serverPluginModuleResolve'
 
 const debug = require('debug')('vite:rewrite')
 
@@ -286,10 +283,7 @@ export const resolveImport = (
   if (bareImportRE.test(id)) {
     // directly resolve bare module names to its entry path so that relative
     // imports from it (including source map urls) can work correctly
-    const isWebModule = !!resolveWebModule(root, id)
-    return `/@modules/${
-      isWebModule ? id : resolveNodeModuleEntry(root, id) || id
-    }`
+    return `/@modules/${resolveBareModule(root, id)}`
   } else {
     let { pathname, query } = resolveRelativeRequest(importer, id)
     // append an extension to extension-less imports

test/test.js

@@ -97,6 +97,7 @@ describe('vite', () => {
     test('module resolving', async () => {
       expect(await getText('.module-resolve-router')).toMatch('ok')
       expect(await getText('.module-resolve-store')).toMatch('ok')
+      expect(await getText('.module-resolve-optimize')).toMatch('ok')
       expect(await getText('.module-resolve-web')).toMatch('ok')
       expect(await getText('.index-resolve')).toMatch('ok')
     })
@@ -314,6 +315,16 @@ describe('vite', () => {
     })
   }
 
+  describe('optimize', () => {
+    test('should build deps', async () => {
+      await execa(binPath, ['optimize'], {
+        cwd: tempDir
+      })
+      const file = path.join(tempDir, 'node_modules', '.vite', 'lodash-es.js')
+      expect(fs.existsSync(file)).toBe(true)
+    })
+  })
+
   // test build first since we are going to edit the fixtures when testing dev
   describe('build', () => {
     let staticServer

yarn.lock

@@ -455,15 +455,13 @@
     "@types/yargs" "^15.0.0"
     chalk "^3.0.0"
 
-"@rollup/plugin-commonjs@^11.1.0":
-  version "11.1.0"
-  resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-11.1.0.tgz#60636c7a722f54b41e419e1709df05c7234557ef"
-  integrity sha512-Ycr12N3ZPN96Fw2STurD21jMqzKwL9QuFhms3SD7KKRK7oaXUsBU9Zt0jL/rOPHiPYisI21/rXGO3jr9BnLHUA==
+"@rollup/plugin-commonjs@11.0.2":
+  version "11.0.2"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-11.0.2.tgz#837cc6950752327cb90177b608f0928a4e60b582"
+  integrity sha512-MPYGZr0qdbV5zZj8/2AuomVpnRVXRU5XKXb3HVniwRoRCreGlf5kOE081isNWeiLIi6IYkwTX9zE0/c7V8g81g==
   dependencies:
-    "@rollup/pluginutils" "^3.0.8"
-    commondir "^1.0.1"
+    "@rollup/pluginutils" "^3.0.0"
     estree-walker "^1.0.1"
-    glob "^7.1.2"
     is-reference "^1.1.2"
     magic-string "^0.25.2"
     resolve "^1.11.0"
@@ -486,7 +484,7 @@
     is-module "^1.0.0"
     resolve "^1.14.2"
 
-"@rollup/pluginutils@^3.0.8":
+"@rollup/pluginutils@^3.0.0", "@rollup/pluginutils@^3.0.8":
   version "3.0.10"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.0.10.tgz#a659b9025920378494cd8f8c59fbf9b3a50d5f12"
   integrity sha512-d44M7t+PjmMrASHbhgpSbVgtL6EFyX7J4mYxwQ/c5eoaE6N2VgCgEcWVzNnwycIloti+/MpwFr8qfw+nRw00sw==
@@ -1737,11 +1735,6 @@ commander@^5.0.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
   integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==
 
-commondir@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
-  integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
-
 compare-func@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/compare-func/-/compare-func-1.3.2.tgz#99dd0ba457e1f9bc722b12c08ec33eeab31fa648"
@@ -4425,6 +4418,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash-es@^4.17.15:
+  version "4.17.15"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
+  integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==
+
 lodash._reinterpolate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"