Built js files are too large

[tychenjiajun]

Describe the bug The built js files in https://unpkg.com/browse/[email protected]/dist/button/ are too large compared to other components library like Element or Buefy.

To Reproduce Steps to reproduce the behavior:

1. Go to unpkg.com
2. Check the file size.

Expected behavior Built files should be smaller, maybe less than 10kb for each component.

[matsp]

@tychenjiajun They are both not using mdc-web. Can't find the dependency. Our compononents are so big because of mdc-web.

[Alan-Liang]

I made a size comparison of importing material-components-vue using different methods.

import method	css size	js size(vendor)
npm index.js	34.3K	585.6K
npm min.js	34.3K	192.7K
direct clone	34.3K	155.9K

• npm index.js means import [component] from 'material-components-vue/dist/[component]'
• npm min.js means import [component] from 'material-components-vue/dist/[component]/[component].min.js'
• direct clone means cloning the repo then import [component] from '../material-components-vue/components/[component]'

Clearly index.js uses eval(), and that's bad for optimization. *.min.js is better, but has cross-references which leads to extra bytes.

These files are generated by vue-cli.

[cjblomqvist]

Probably due to the underlying library (material-components-web), which is developed by Google. So not much to do there (except for the first one).

It would be nice though if the components folder is brought along when publishing so one doesn't have to clone the repo to be able to go with the 3rd option. That also enables component-specific imports (now one must import/add each component globally).