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

@vitejs/plugin-legacy does not use browserslistrc #2476

Closed
3 tasks done
fairbanksg opened this issue Mar 11, 2021 · 6 comments · Fixed by #11318
Closed
3 tasks done

@vitejs/plugin-legacy does not use browserslistrc #2476

fairbanksg opened this issue Mar 11, 2021 · 6 comments · Fixed by #11318
Labels
p3-minor-bug An edge case that only affects very specific usage (priority) plugin: legacy

Comments

@fairbanksg
Copy link
Contributor

⚠️ IMPORTANT ⚠️ Please do not ignore this template. If you do, your issue will be closed immediately.

Describe the bug

@vitejs/plugin-legacy does not use browserlist config files. When the targets option is not specified, it is defaulted to defaults, which means @babel/present-env will use that target rather than .browserslistrc.

Reproduction

import { defineConfig } from 'vite'
import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  plugins: [legacy()]
})

System Info

  • vite version: 2.0.5
  • Operating System: macOS 11.2.2
  • Node version: 14.16.0
  • Package manager (npm/yarn/pnpm) and version: yarn 1.22.10

Logs (Optional if provided reproduction)

With no targets option
[@vitejs/plugin-legacy] legacy polyfills: Set(95) {
  'core-js/modules/es.symbol.js',
  'core-js/modules/es.symbol.description.js',
  'core-js/modules/es.object.to-string.js',
  'core-js/modules/es.symbol.iterator.js',
  'core-js/modules/es.string.iterator.js',
  'core-js/modules/es.array.iterator.js',
  'core-js/modules/web.dom-collections.iterator.js',
  'core-js/modules/es.symbol.async-iterator.js',
  'core-js/modules/es.symbol.to-string-tag.js',
  'core-js/modules/es.math.to-string-tag.js',
  'core-js/modules/es.json.to-string-tag.js',
  'core-js/modules/es.object.get-prototype-of.js',
  'core-js/modules/es.function.name.js',
  'core-js/modules/es.promise.js',
  'core-js/modules/es.regexp.to-string.js',
  'core-js/modules/web.dom-collections.for-each.js',
  'core-js/modules/es.array.slice.js',
  'core-js/modules/es.number.constructor.js',
  'core-js/modules/es.number.to-fixed.js',
  'core-js/modules/es.array.join.js',
  'core-js/modules/es.array.map.js',
  'core-js/modules/es.array.filter.js',
  'core-js/modules/es.string.split.js',
  'core-js/modules/es.regexp.exec.js',
  'core-js/modules/es.array.splice.js',
  'core-js/modules/es.object.assign.js',
  'core-js/modules/es.object.get-own-property-descriptor.js',
  'core-js/modules/es.array.concat.js',
  'core-js/modules/es.weak-set.js',
  'core-js/modules/es.string.replace.js',
  'core-js/modules/web.url.to-json.js',
  'core-js/modules/es.object.keys.js',
  'core-js/modules/esnext.global-this.js',
  'core-js/modules/es.regexp.constructor.js',
  'core-js/modules/es.array.includes.js',
  'core-js/modules/es.string.includes.js',
  'regenerator-runtime/runtime.js',
  'core-js/modules/es.object.get-own-property-descriptors.js',
  'core-js/modules/web.url.js',
  'core-js/modules/es.string.search.js',
  'core-js/modules/es.string.match.js',
  'core-js/modules/es.string.trim.js',
  'core-js/modules/es.array.find.js',
  'core-js/modules/es.array.reduce.js',
  'core-js/modules/es.set.js',
  'core-js/modules/es.string.sub.js',
  'core-js/modules/es.array.from.js',
  'core-js/modules/es.map.js',
  'core-js/modules/es.string.starts-with.js',
  'core-js/modules/es.string.ends-with.js',
  'core-js/modules/es.weak-map.js',
  'core-js/modules/es.string.pad-start.js',
  'core-js/modules/es.object.values.js',
  'core-js/modules/es.array.find-index.js',
  'core-js/modules/es.number.epsilon.js',
  'core-js/modules/es.object.get-own-property-names.js',
  'core-js/modules/es.object.is.js',
  'core-js/modules/es.object.freeze.js',
  'core-js/modules/es.typed-array.uint32-array.js',
  'core-js/modules/es.typed-array.copy-within.js',
  'core-js/modules/es.typed-array.every.js',
  'core-js/modules/es.typed-array.fill.js',
  'core-js/modules/es.typed-array.filter.js',
  'core-js/modules/es.typed-array.find.js',
  'core-js/modules/es.typed-array.find-index.js',
  'core-js/modules/es.typed-array.for-each.js',
  'core-js/modules/es.typed-array.includes.js',
  'core-js/modules/es.typed-array.index-of.js',
  'core-js/modules/es.typed-array.iterator.js',
  'core-js/modules/es.typed-array.join.js',
  'core-js/modules/es.typed-array.last-index-of.js',
  'core-js/modules/es.typed-array.map.js',
  'core-js/modules/es.typed-array.reduce.js',
  'core-js/modules/es.typed-array.reduce-right.js',
  'core-js/modules/es.typed-array.reverse.js',
  'core-js/modules/es.typed-array.set.js',
  'core-js/modules/es.typed-array.slice.js',
  'core-js/modules/es.typed-array.some.js',
  'core-js/modules/es.typed-array.sort.js',
  'core-js/modules/es.typed-array.subarray.js',
  'core-js/modules/es.typed-array.to-locale-string.js',
  'core-js/modules/es.typed-array.to-string.js',
  'core-js/modules/es.object.is-frozen.js',
  'core-js/modules/es.reflect.own-keys.js',
  'core-js/modules/es.reflect.get-own-property-descriptor.js',
  'core-js/modules/es.string.link.js',
  'core-js/modules/es.array-buffer.constructor.js',
  'core-js/modules/es.reflect.construct.js',
  'core-js/modules/es.promise.finally.js',
  'core-js/modules/es.array.flat-map.js',
  'core-js/modules/es.array.unscopables.flat-map.js',
  'core-js/modules/es.math.sinh.js',
  'core-js/modules/es.math.cosh.js',
  'core-js/modules/es.string.repeat.js',
  'core-js/modules/es.typed-array.float32-array.js'
}
With targets set to same value as in my .browserslistrc (>0.2%, not dead, not op_mini all)
[@vitejs/plugin-legacy] legacy polyfills: Set(101) {
  'core-js/modules/es.symbol.js',
  'core-js/modules/es.symbol.description.js',
  'core-js/modules/es.object.to-string.js',
  'core-js/modules/es.symbol.iterator.js',
  'core-js/modules/es.string.iterator.js',
  'core-js/modules/es.array.iterator.js',
  'core-js/modules/web.dom-collections.iterator.js',
  'core-js/modules/es.symbol.async-iterator.js',
  'core-js/modules/es.symbol.to-string-tag.js',
  'core-js/modules/es.math.to-string-tag.js',
  'core-js/modules/es.json.to-string-tag.js',
  'core-js/modules/es.object.get-prototype-of.js',
  'core-js/modules/es.function.name.js',
  'core-js/modules/es.promise.js',
  'core-js/modules/es.regexp.to-string.js',
  'core-js/modules/web.dom-collections.for-each.js',
  'core-js/modules/es.array.reverse.js',
  'core-js/modules/es.array.slice.js',
  'core-js/modules/es.number.constructor.js',
  'core-js/modules/es.number.to-fixed.js',
  'core-js/modules/es.array.join.js',
  'core-js/modules/es.array.map.js',
  'core-js/modules/es.array.filter.js',
  'core-js/modules/es.array.sort.js',
  'core-js/modules/es.string.split.js',
  'core-js/modules/es.regexp.exec.js',
  'core-js/modules/es.array.index-of.js',
  'core-js/modules/es.array.splice.js',
  'core-js/modules/es.object.assign.js',
  'core-js/modules/es.object.get-own-property-descriptor.js',
  'core-js/modules/es.array.concat.js',
  'core-js/modules/es.weak-set.js',
  'core-js/modules/es.string.replace.js',
  'core-js/modules/es.date.to-json.js',
  'core-js/modules/web.url.to-json.js',
  'core-js/modules/es.object.keys.js',
  'core-js/modules/esnext.global-this.js',
  'core-js/modules/es.regexp.constructor.js',
  'core-js/modules/es.array.includes.js',
  'core-js/modules/es.string.includes.js',
  'regenerator-runtime/runtime.js',
  'core-js/modules/es.object.get-own-property-descriptors.js',
  'core-js/modules/web.url.js',
  'core-js/modules/es.string.search.js',
  'core-js/modules/es.string.match.js',
  'core-js/modules/es.string.trim.js',
  'core-js/modules/es.array.find.js',
  'core-js/modules/es.array.reduce.js',
  'core-js/modules/es.set.js',
  'core-js/modules/es.string.sub.js',
  'core-js/modules/es.array.from.js',
  'core-js/modules/es.map.js',
  'core-js/modules/es.string.starts-with.js',
  'core-js/modules/es.string.ends-with.js',
  'core-js/modules/es.array.last-index-of.js',
  'core-js/modules/es.weak-map.js',
  'core-js/modules/es.string.pad-start.js',
  'core-js/modules/es.object.values.js',
  'core-js/modules/es.array.find-index.js',
  'core-js/modules/es.number.epsilon.js',
  'core-js/modules/es.object.get-own-property-names.js',
  'core-js/modules/es.object.is.js',
  'core-js/modules/es.object.freeze.js',
  'core-js/modules/es.typed-array.uint32-array.js',
  'core-js/modules/es.typed-array.copy-within.js',
  'core-js/modules/es.typed-array.every.js',
  'core-js/modules/es.typed-array.fill.js',
  'core-js/modules/es.typed-array.filter.js',
  'core-js/modules/es.typed-array.find.js',
  'core-js/modules/es.typed-array.find-index.js',
  'core-js/modules/es.typed-array.for-each.js',
  'core-js/modules/es.typed-array.includes.js',
  'core-js/modules/es.typed-array.index-of.js',
  'core-js/modules/es.typed-array.iterator.js',
  'core-js/modules/es.typed-array.join.js',
  'core-js/modules/es.typed-array.last-index-of.js',
  'core-js/modules/es.typed-array.map.js',
  'core-js/modules/es.typed-array.reduce.js',
  'core-js/modules/es.typed-array.reduce-right.js',
  'core-js/modules/es.typed-array.reverse.js',
  'core-js/modules/es.typed-array.set.js',
  'core-js/modules/es.typed-array.slice.js',
  'core-js/modules/es.typed-array.some.js',
  'core-js/modules/es.typed-array.sort.js',
  'core-js/modules/es.typed-array.subarray.js',
  'core-js/modules/es.typed-array.to-locale-string.js',
  'core-js/modules/es.typed-array.to-string.js',
  'core-js/modules/es.array-buffer.slice.js',
  'core-js/modules/es.object.is-frozen.js',
  'core-js/modules/es.reflect.own-keys.js',
  'core-js/modules/es.reflect.get-own-property-descriptor.js',
  'core-js/modules/es.string.link.js',
  'core-js/modules/es.array-buffer.constructor.js',
  'core-js/modules/es.reflect.construct.js',
  'core-js/modules/es.promise.finally.js',
  'core-js/modules/es.array.flat-map.js',
  'core-js/modules/es.array.unscopables.flat-map.js',
  'core-js/modules/es.math.sinh.js',
  'core-js/modules/es.math.cosh.js',
  'core-js/modules/es.string.repeat.js',
  'core-js/modules/es.typed-array.float32-array.js'
}
@maxbublik
Copy link

I can confirm that explicitly changing targets in plugin-legacy config does affect the size of polyfills-legacy.xxxxx.js file. While changing targets in .browserslistrc does not affect the size of the polyfills chunk.

BTW what's up with PR #2627

@patak-dev
Copy link
Member

@maxbublik I don't know why the PR was closed, this should be fixed. PR welcomed, someone could start from that closed PR and send a new one against the latest version

@sapphi-red
Copy link
Member

browserslist is not working because plugin-legacy uses @babel/standalone that uses browser build of browserslist. (#10502 (comment))

Switching to @babel/core + @babel/preset-env will make it work. But will bloat the dependencies that needs to be installed.

Handling browserslist on plugin-legacy or bundling babel on our side might increase maintenance burden.

@KAROTT7
Copy link
Contributor

KAROTT7 commented Dec 11, 2022

@sapphi-red By my test, it doesn't add additional dependency and increase bundle sizes, please see comparison results:

  • use @babel/standalone

WechatIMG72

- use `@babel/core` and `@babel/preset-env`

WechatIMG71

and it will not result in break change, because @babel/standalone's core api (transform*) is from @babel/core, and @babel/standalone has include @babel/preset-env.

@sapphi-red
Copy link
Member

sapphi-red commented Dec 11, 2022

@KAROTT7 I was not talking about neither the dependency size nor the bundle size. I was talking about the number of dependencies (including transitive ones). The number of dependencies affects the install time.

Anyway, in the last meeting, we decided to switch to @babel/core + @babel/preset-env. Would you like to send a PR?

@gunta
Copy link

gunta commented Dec 21, 2022

Since babel/preset-env defaults to looking for browserlistrc, I was expecting the same here.
Looking forward to this being merged.

@github-actions github-actions bot locked and limited conversation to collaborators Feb 17, 2023
futurGH pushed a commit to futurGH/vite that referenced this issue Feb 26, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
p3-minor-bug An edge case that only affects very specific usage (priority) plugin: legacy
Projects
Archived in project
8 participants