"Element UI, featuring a wide array of components, contributing to bloated bundle sizes

I was looking into the following link.

After following the instructions, I realized I am using class based components. Therefore, I am importing as shown below:

import {Checkbox} from 'element-ui';

@Component({
  components: { Checkbox
  }
})
export default class Work extends Vue {
}

However, the bundle still seems to be including the entire element ui library, instead of just the button component.

When I run npm run build, it generates a vendor chunk of 800+ kb, which includes code for other components like color-picker.

The instructions mention editing the .babelrc file as shown below:

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

Since I am not using components globally as a plugin, I have not made that change.

Is there a way to reduce the element ui bundle size and include only the required components to make the vendor chunks smaller?

typescriptvue.jsvue-componentelement-ui

Answer №1

Even if we are not using our component on a global level as a plugin, we still need to set up Babel configurations. I initially misunderstood their statement, thinking it only applied to global plugins like examples that use Vue.use(Pagination);.

To make it work with Babel, include the following in your babel.config.js file:

module.exports = {
  presets: [
    '@vue/app'
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

Don't forget to install the following package:

npm install babel-plugin-component -D

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

click event on ion card

Attempting to handle a click event within an ion-card using Ionic 5.0.2 version has presented some challenges. Despite my efforts, I have not been successful in handling the event with the expected function. Here is a snippet of my code: Dynamic card list ...

javascriptangulartypescriptionic-framework

Customize the theme of Ant Design for VueJS

I have successfully set up my Vue3 application with Tailwind and Ant Design. However, I am facing issues with customizing the Ant Design theme. I have been referring to this guide. When trying to customize the theme, I encountered the following error: Err ...

javascriptvue.jswebpack

Issues with Angular not reflecting data changes in the view after updates have occurred

I have a setup with two components. One is responsible for creating new data entries, while the other one is in charge of listing all the data stored in a database. The issue I'm facing is that even though the creation component successfully adds new ...

angulartypescriptangular-servicesangular-components

Examining for a TypeError with Typescript and Jasmine

In my current project, I am faced with the challenge of writing unit tests in Typescript for an existing library that was originally written in plain JS. Most of our page logic is also written in plain JS. Some functions in this library throw exceptions if ...

typescriptjasmine

Steps for displaying a 404 page on a server-side rendered dynamic route following a client-side page transition

I'm currently developing a next.js project using Contentful as the Content Management System. My goal is to display a 404 page for a server-side rendered dynamic route after a client-side page transition. When I directly request the page (by entering ...

reactjstypescriptnext.js

The onShown event in ngx-bootstrap's datePicker is fired just before the calendar actually becomes visible

Recently, I've been exploring the capabilities of ngx-bootstrap's rangeDatePicker. My current challenge involves attempting to automatically navigate to the previous month as soon as the user opens the rangeDatePicker. To accomplish this, I have ...

angulartypescriptdatepickerngx-bootstrap

Using TypeScript with React Redux, encountering issue of property not being available in the Reducer from the ActionType

Currently, I am learning how to implement a Reducer in Redux while using React with TypeScript. I have encountered an issue that I need help with. Below are the action types that I am working with: import { LoginResponseInterface } from "../../interfaces ...

reactjstypescriptreduxreact-redux

router.beforeEach is designed to interact exclusively with router-link components

Currently, I am working on dynamically changing the meta tag using Vue router. Following the guidance provided in this article, I have successfully implemented the feature. However, I noticed that it only functions properly when I change the route from a r ...

vue.jsvuejs2vue-router

Achieving the functionality of making only one list item in the navbar bolded upon being clicked using React and Typescript logic

Currently, in my navigation bar, I am attempting to make only the active or clicked list item appear bold when clicked. At the moment, I can successfully achieve this effect; however, when I click on other list items, they also become bolded, while the ori ...

javascriptcssreactjstypescriptevents

Vue alert - Cannot access indexOf property of a value that is undefined

After browsing through numerous similar issues on StackOverflow, none seem to address the specific problem I encountered... I have been smoothly working on a Vue JS project + Laravel until I suddenly encountered an error that seems unsolvable (even though ...

javascriptvue.jsvuesax

What is the best way to strip out a changing segment of text from a string?

let: string str = "a=<random text> a=pattern:<random text (may be fixed length)> a=<random text>"; In the given string above, let's assume that a= and pattern are constants. It is possible that there may or may not be a ...

javascriptregextypescriptstringreplace

"Once the initial date has been selected, v-Calendar's datepicker allows for setting a

Is there a way to trigger an event for the date range picker of v-calendar after the first date is picked or prevent the inputs from adding the dates until both dates have been selected? Here is the Vue component I have: new Vue({ el: "#app", data( ...

javascriptvue.js

What could be causing the function to work properly apart from the @click event?

Currently utilizing Vue3 and firestore Encountering an issue. <textarea class="form-control v-model="form.comment" @keypress.enter="saveComment" required></textarea> <button @click="saveComment">save< ...

vue.jsvisual-studio-codevuejs3

How can I efficiently include all css from node_modules in vuejs?

For my Vue.js app built with the webpack template and vuetify, I am starting by importing the vuetify css in my App.vue. <style> @import '../node_modules/vuetify/dist/vuetify.min.css' </style> I'm wondering if this is the c ...

javascriptnpmvue.jsnode-modulesvue-cli

"I encountered an error while sorting lists in Vue 3 - the function this.lists.sort is not

Creating a Vue 3 front-end template: <template> <div class="container"> <router-link to="/user/create" class="btn btn-success mt-5 mb-5">Add New</router-link> <table class=" ...

javascriptfirebasevue.jssorting

Solve the issue of the __typename union

Imagine having the following union: export type IBookmarkItemFragment = | ({ __typename: "Story" } & { story: number; }) | ({ __typename: "Product" } & { product: number; }) | ({ __typename: "Project" } & { proj ...

typescriptgraphql

The email field was blank when attempting to log in using Google authentication on Firebase

I encountered an issue where the email was null when using Firebase Google login. Below is the code I tested: function googleSignIn() { var provider = new firebase.auth.GoogleAuthProvider(); firebase.auth().signInWithPopup(provider) .then(fu ...

node.jsvue.js

Unable to access Vue.js cookies: they are not defined

I integrated vue-cookies into my project successfully. In the main.js file, I added the following code: createApp(App) .use(store) .use(router, axios, VueCookies) The script section in App.vue file looks like this: <script> import Navbar fr ...

javascriptvue.jscookiesweb-deploymentvuejs3

Change the value of the checked property to modify the checked status

This is a miniCalculator project. In this mini calculator, I am trying to calculate the operation when the "calculate" button is pressed. However, in order for the calculations to run correctly in the operations.component.ts file, I need to toggle the val ...

javascriptangulartypescript

Ways to verify the compatibility between TypeScript type definitions in @types and the corresponding package

After dabbling with typescript in my node.js projects for a while, I've come to realize that many npm packages have separate @types packages for typescript definitions. But here's the dilemma: how can one be certain that the @types package is syn ...

node.jstypescriptnpmtypescript-typings