refactor: deprecate polyfillDynamicImport (vitejs#4373)

aleclarson · Nov 8, 2021 · fc8a7fa · fc8a7fa
1 parent 7ae311c
commit fc8a7fa
Show file tree

Hide file tree

Showing 9 changed files with 22 additions and 186 deletions.
diff --git a/docs/config/index.md b/docs/config/index.md
@@ -543,23 +543,6 @@ createServer()
 
   Note the build will fail if the code contains features that cannot be safely transpiled by esbuild. See [esbuild docs](https://esbuild.github.io/content-types/#javascript) for more details.
 
-### build.polyfillDynamicImport
-
-- **Type:** `boolean`
-- **Default:** `false`
-
-  Whether to automatically inject [dynamic import polyfill](https://github.com/GoogleChromeLabs/dynamic-import-polyfill).
-
-  If set to true, the polyfill is auto injected into the proxy module of each `index.html` entry. If the build is configured to use a non-html custom entry via `build.rollupOptions.input`, then it is necessary to manually import the polyfill in your custom entry:
-
-  ```js
-  import 'vite/dynamic-import-polyfill'
-  ```
-
-  When using [`@vitejs/plugin-legacy`](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy), the plugin sets this option to `true` automatically.
-
-  Note: the polyfill does **not** apply to [Library Mode](/guide/build#library-mode). If you need to support browsers without native dynamic import, you should probably avoid using it in your library.
-
 ### build.outDir
 
 - **Type:** `string`

diff --git a/docs/guide/backend-integration.md b/docs/guide/backend-integration.md
@@ -20,13 +20,6 @@ Or you can follow these steps to configure it manually:
    })
    ```
 
-   If you use [`@vitejs/plugin-legacy`](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) or manually enable the [`build.dynamicImportPolyfill` option](/config/#build-polyfilldynamicimport), remember to add the [dynamic import polyfill](/config/#build-polyfilldynamicimport) to your entry, since it will no longer be auto-injected:
-
-   ```js
-   // add the beginning of your app entry
-   import 'vite/dynamic-import-polyfill'
-   ```
-
 2. For development, inject the following in your server's HTML template (substitute `http://localhost:3000` with the local URL Vite is running at):
 
    ```html

diff --git a/packages/playground/multiple-entrypoints/vite.config.js b/packages/playground/multiple-entrypoints/vite.config.js
@@ -5,7 +5,6 @@ module.exports = {
   build: {
     outDir: './dist',
     emptyOutDir: true,
-    polyfillDynamicImport: false,
     rollupOptions: {
       preserveEntrySignatures: 'strict',
       input: {

diff --git a/packages/vite/src/node/build.ts b/packages/vite/src/node/build.ts
@@ -68,6 +68,7 @@ export interface BuildOptions {
    * whether to inject dynamic import polyfill.
    * Note: does not apply to library mode.
    * @default false
+   * @deprecated use plugin-legacy for browsers that don't support dynamic import
    */
   polyfillDynamicImport?: boolean
   /**
@@ -204,13 +205,12 @@ export interface LibraryOptions {
 export type LibraryFormats = 'es' | 'cjs' | 'umd' | 'iife'
 
 export type ResolvedBuildOptions = Required<
-  Omit<BuildOptions, 'base' | 'cleanCssOptions'>
+  Omit<BuildOptions, 'base' | 'cleanCssOptions' | 'polyfillDynamicImport'>
 >
 
 export function resolveBuildOptions(raw?: BuildOptions): ResolvedBuildOptions {
   const resolved: ResolvedBuildOptions = {
     target: 'modules',
-    polyfillDynamicImport: false,
     outDir: 'dist',
     assetsDir: 'assets',
     assetsInlineLimit: 4096,

diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts
@@ -528,6 +528,25 @@ export async function resolveConfig(
     }
   })
 
+  if (config.build?.polyfillDynamicImport) {
+    logDeprecationWarning(
+      'build.polyfillDynamicImport',
+      '"polyfillDynamicImport" has been removed. Please use @vitejs/plugin-legacy if your target browsers do not support dynamic imports.'
+    )
+  }
+
+  Object.defineProperty(resolvedBuildOptions, 'polyfillDynamicImport', {
+    enumerable: false,
+    get() {
+      logDeprecationWarning(
+        'build.polyfillDynamicImport',
+        '"polyfillDynamicImport" has been removed. Please use @vitejs/plugin-legacy if your target browsers do not support dynamic imports.',
+        new Error()
+      )
+      return false
+    }
+  })
+
   if (config.build?.cleanCssOptions) {
     logDeprecationWarning(
       'build.cleanCssOptions',

diff --git a/packages/vite/src/node/plugins/dynamicImportPolyfill.ts b/packages/vite/src/node/plugins/dynamicImportPolyfill.ts
diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
@@ -20,7 +20,6 @@ import {
   getAssetFilename
 } from './asset'
 import { isCSSRequest, chunkToEmittedCssFileMap } from './css'
-import { polyfillId } from './dynamicImportPolyfill'
 import {
   AttributeNode,
   NodeTransform,
@@ -264,11 +263,6 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
 
         processedHtml.set(id, s.toString())
 
-        // inject dynamic import polyfill
-        if (config.build.polyfillDynamicImport) {
-          js = `import "${polyfillId}";\n${js}`
-        }
-
         return js
       }
     },

diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts
@@ -212,7 +212,6 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
         return
       }
 
-      const isPolyfillEnabled = config.build.polyfillDynamicImport
       for (const file in bundle) {
         const chunk = bundle[file]
         // can't use chunk.dynamicImports.length here since some modules e.g.
@@ -229,12 +228,7 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
           if (imports.length) {
             const s = new MagicString(code)
             for (let index = 0; index < imports.length; index++) {
-              const { s: start, e: end, d: dynamicIndex } = imports[index]
-              // if dynamic import polyfill is used, rewrite the import to
-              // use the polyfilled function.
-              if (isPolyfillEnabled) {
-                s.overwrite(dynamicIndex, dynamicIndex + 6, `__import__`)
-              }
+              const { s: start, e: end } = imports[index]
               // check the chunk being imported
               const url = code.slice(start, end)
               const deps: Set<string> = new Set()

diff --git a/packages/vite/src/node/plugins/index.ts b/packages/vite/src/node/plugins/index.ts
@@ -10,7 +10,6 @@ import { assetPlugin } from './asset'
 import { clientInjectionsPlugin } from './clientInjections'
 import { htmlInlineScriptProxyPlugin } from './html'
 import { wasmPlugin } from './wasm'
-import { dynamicImportPolyfillPlugin } from './dynamicImportPolyfill'
 import { webWorkerPlugin } from './worker'
 import { preAliasPlugin } from './preAlias'
 import { definePlugin } from './define'
@@ -31,7 +30,6 @@ export async function resolvePlugins(
     isBuild ? null : preAliasPlugin(),
     aliasPlugin({ entries: config.resolve.alias }),
     ...prePlugins,
-    dynamicImportPolyfillPlugin(config),
     resolvePlugin({
       ...config.resolve,
       root: config.root,