diff --git a/packages/compiler-core/__tests__/__snapshots__/codegen.spec.ts.snap b/packages/compiler-core/__tests__/__snapshots__/codegen.spec.ts.snap index 19a152de..6975881e 100644 --- a/packages/compiler-core/__tests__/__snapshots__/codegen.spec.ts.snap +++ b/packages/compiler-core/__tests__/__snapshots__/codegen.spec.ts.snap @@ -171,7 +171,7 @@ export function render(_ctx, _cache) { }" `; -exports[`compiler: codegen module mode preamble w/ optimizeBindings: true 1`] = ` +exports[`compiler: codegen module mode preamble w/ optimizeImports: true 1`] = ` "import { createVNode, resolveDirective } from \\"vue\\" // Binding optimization for webpack code-split diff --git a/packages/compiler-core/__tests__/codegen.spec.ts b/packages/compiler-core/__tests__/codegen.spec.ts index 8a8c77ab..f4a11561 100644 --- a/packages/compiler-core/__tests__/codegen.spec.ts +++ b/packages/compiler-core/__tests__/codegen.spec.ts @@ -68,11 +68,11 @@ describe('compiler: codegen', () => { expect(code).toMatchSnapshot() }) - test('module mode preamble w/ optimizeBindings: true', () => { + test('module mode preamble w/ optimizeImports: true', () => { const root = createRoot({ helpers: [CREATE_VNODE, RESOLVE_DIRECTIVE] }) - const { code } = generate(root, { mode: 'module', optimizeBindings: true }) + const { code } = generate(root, { mode: 'module', optimizeImports: true }) expect(code).toMatch( `import { ${helperNameMap[CREATE_VNODE]}, ${ helperNameMap[RESOLVE_DIRECTIVE] diff --git a/packages/compiler-core/src/codegen.ts b/packages/compiler-core/src/codegen.ts index 323a540f..f01634c7 100644 --- a/packages/compiler-core/src/codegen.ts +++ b/packages/compiler-core/src/codegen.ts @@ -88,7 +88,7 @@ function createCodegenContext( sourceMap = false, filename = `template.vue.html`, scopeId = null, - optimizeBindings = false, + optimizeImports = false, runtimeGlobalName = `Vue`, runtimeModuleName = `vue`, ssr = false @@ -100,7 +100,7 @@ function createCodegenContext( sourceMap, filename, scopeId, - optimizeBindings, + optimizeImports, runtimeGlobalName, runtimeModuleName, ssr, @@ -355,7 +355,7 @@ function genModulePreamble( helper, newline, scopeId, - optimizeBindings, + optimizeImports, runtimeModuleName } = context @@ -368,7 +368,7 @@ function genModulePreamble( // generate import statements for helpers if (ast.helpers.length) { - if (optimizeBindings) { + if (optimizeImports) { // when bundled with webpack with code-split, calling an import binding // as a function leads to it being wrapped with `Object(a.b)` or `(0,a.b)`, // incurring both payload size increase and potential perf overhead. diff --git a/packages/compiler-core/src/options.ts b/packages/compiler-core/src/options.ts index ee07818c..952c5cb2 100644 --- a/packages/compiler-core/src/options.ts +++ b/packages/compiler-core/src/options.ts @@ -155,7 +155,7 @@ export interface CodegenOptions { * (only used for webpack code-split) * @default false */ - optimizeBindings?: boolean + optimizeImports?: boolean /** * Customize where to import runtime helpers from. * @default 'vue' diff --git a/packages/template-explorer/src/options.ts b/packages/template-explorer/src/options.ts index 7a2a09c1..02ac3c9b 100644 --- a/packages/template-explorer/src/options.ts +++ b/packages/template-explorer/src/options.ts @@ -6,7 +6,7 @@ export const ssrMode = ref(false) export const compilerOptions: CompilerOptions = reactive({ mode: 'module', prefixIdentifiers: false, - optimizeBindings: false, + optimizeImports: false, hoistStatic: false, cacheHandlers: false, scopeId: null @@ -144,18 +144,18 @@ const App = { h('label', { for: 'scope-id' }, 'scopeId') ]), - // toggle optimizeBindings + // toggle optimizeImports h('li', [ h('input', { type: 'checkbox', - id: 'optimize-bindings', + id: 'optimize-imports', disabled: !isModule || isSSR, - checked: isModule && !isSSR && compilerOptions.optimizeBindings, + checked: isModule && !isSSR && compilerOptions.optimizeImports, onChange(e: Event) { - compilerOptions.optimizeBindings = (e.target as HTMLInputElement).checked + compilerOptions.optimizeImports = (e.target as HTMLInputElement).checked } }), - h('label', { for: 'optimize-bindings' }, 'optimizeBindings') + h('label', { for: 'optimize-imports' }, 'optimizeImports') ]) ]) ])