Skip to content

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