Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using "bundler" build with compiler (vue.esm-bundler.js) with webpack in "production" mode includes @babel/parser in final bundle #2515

Closed
Liwoj opened this issue Oct 29, 2020 · 4 comments
Labels
🐞 bug Something isn't working scope: compiler

Comments

@Liwoj
Copy link

Liwoj commented Oct 29, 2020

Version

3.0.2

Reproduction link

https://github.com/Liwoj/vue3-with-compiler

Steps to reproduce

  1. create new project with Vue CLI - select Vue 3 preset
  2. Modify build command in package.json by adding --report
  3. create vue.config.js and enable runtime compilation - runtimeCompiler: true (which switches vue alias to vue.esm-bundler.js)
  4. run yarn build
  5. Check dist\report.html

What is expected?

"vendors" bundle should not include @babel/parser package (230 KB)

What is actually happening?

@babel/parser is part of the production bundle...


As anything from @babel/parser is not included in browser compiler builds of Vue (vue.esm-browser.js for example), it should not be included when used with bundler build

I'm not an expert on Vue 3 codebase but it seems problem is in the https://github.com/vuejs/vue-next/blob/master/packages/compiler-core/src/transforms/transformExpression.ts#L90

processExpression function

if (__DEV__ && __BROWSER__) {
    // simple in-browser validation (same logic in 2.x)
    validateBrowserExpression(node, context, asParams, asRawStatements)
    return node
  }

Same code in @vue/compiler-core/dist/compiler-core.esm-bundler.js (NPM package)

if ((process.env.NODE_ENV !== 'production') && true) {
        // simple in-browser validation (same logic in 2.x)
        validateBrowserExpression(node, context, asParams, asRawStatements);
        return node;
    }

...the code which is intended to run in the browser is used ONLY in DEV build and eliminated in production build which leaves the rest of the processExpression function (which is using @babel/parser) in the bundle

@LinusBorg LinusBorg added 🐞 bug Something isn't working scope: compiler labels Oct 29, 2020
@unbyte
Copy link
Contributor

unbyte commented Oct 30, 2020

it seems the same as #2258

@sajuthankathurai
Copy link

Is there any workaround to solve this issue or we need to wait till next build of Vue?

@sajuthankathurai
Copy link

This issue is just mentioned in #2513 , But is there a workaround to fix this issue?

@gearboxdesign
Copy link

gearboxdesign commented Nov 19, 2020

Watching this one keenly, for a project I am conducting we have no choice but to compile some templates on the fly. I'm aware there was an entire re-write between Vue 2 and Vue 3 but using the equivalent version of Vue does not drag in the entire babel parser library so I'm hopeful a resolution can be found for Vue 3.... otherwise performance wise I'm in trouble if not before we need to go to production.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🐞 bug Something isn't working scope: compiler
Projects
None yet
Development

No branches or pull requests

5 participants