Skip to content

perf: Remove unused es6.number.constructor polyfill #58

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

Merged
merged 1 commit into from
Jun 26, 2019
Merged

perf: Remove unused es6.number.constructor polyfill #58

merged 1 commit into from
Jun 26, 2019

Conversation

rkunev
Copy link
Contributor

@rkunev rkunev commented Jun 26, 2019

Hi! I was doing a POC for Vue components built with --target lib and Vue CLI, but instead of using webpack it's using Rollup. Generally speaking, using Rollup as a module bundler will result in a smaller bundle size, but you can get the most out of the default Vue CLI build system by just using a better @babel/preset-env config, tuned for bundling components as a library.

Before:

yarn build
$ vue-cli-service build --target lib src/LaravelVuePagination.vue

DONE  Compiled successfully in 2344ms

  File                                      Size             Gzipped

  dist/laravel-vue-pagination.umd.min.js    15.54 KiB        5.61 KiB
  dist/laravel-vue-pagination.umd.js        39.42 KiB        10.35 KiB
  dist/laravel-vue-pagination.common.js     39.01 KiB        10.23 KiB

Images and other types of assets omitted.

After (using useBuiltIns: false):

yarn build
$ vue-cli-service build --target lib src/LaravelVuePagination.vue

DONE  Compiled successfully in 3990ms

  File                                      Size             Gzipped

  dist/laravel-vue-pagination.umd.min.js    6.75 KiB         2.27 KiB
  dist/laravel-vue-pagination.umd.js        17.33 KiB        4.41 KiB
  dist/laravel-vue-pagination.common.js     16.92 KiB        4.29 KiB

Images and other types of assets omitted.

Explanation

Per the @vue/babel-preset-app docs:

If you are building a library or web component instead of an app, you probably want to set this to false and let the consuming app be responsible for the polyfills.

In your specific case es6.number.constructor polyfill is being added, because both LaravelVuePagination.vue and RenderlessLaravelVuePagination.vue have a prop validator with the Number constructor. Babel is working on the safe side and includes 8.81 KiB of polyfills for the whole browser compat table here. In reality, non of those are needed for the Vue validators to correctly work in the supported browsers in .browserslistrc config.

tl;dr: 40.4% size reduction with no additional cost 🎉

@vercel
Copy link

vercel bot commented Jun 26, 2019

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://laravel-vue-pagination-git-fork-rkunev-perf-reduce-bundle-size.dev7studios.now.sh

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants