I'm building a vue ui library (bundle format > esm),
It's working fine on my app except one problem: I was expecting that when I build my app, Webpack will grab from my ui library only components i'm using, not the whole library. But the opposite happened.
Webpack creates a vendor chunk containing the whole ui library, although im using only 1 component:
import { OneComponent } from 'my-lib';
NB: I'm using Webpack 4.46.0;
Webpack rules:
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
comments: true,
presets: ['@babel/preset-env'],
plugins: ['transform-vue-jsx'],
},
},
{
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/],
},
},
],
}
I would be grateful if you can help me tree shake my vendor chunk.