Subscribe on changes!

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

avatar
Oct 29th 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

avatar
Oct 30th 2020

it seems the same as #2258

avatar
Oct 30th 2020

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

avatar
Nov 16th 2020

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

avatar
Nov 19th 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.