Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

We can import individual components, as per But if you do this, it still seems to pull in all the code, which defeats the purpose.

I have this plugin in a Nuxt3 proof of concept app:

import BButton from 'bootstrap-vue-3'
import BNotice from 'bootstrap-vue-3'

export default defineNuxtPlugin((nuxtApp) => {

If I then build this and check what code is flowing over the wire, I can see BTable, BToast, and all the other stuff that I’m not using, and Lighthouse warns me about unused code.

I’m not knowledgeable enough in this area to identify why this might be happening, but I wonder if it is related to the TODO In BootstrapViewOptions.

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:1
  • Comments:14 (13 by maintainers)

github_iconTop GitHub Comments

messenjercommented, May 8, 2022

For the tree-shaking we need to define correctly the sideEffect in the package.json

For the moment, there are none :

We should take inspiration from the vue-bootstrap :

  "sideEffects": [

And read this also :

messenjercommented, May 8, 2022

Yes, there is still a lot of work to do. As long as the bootstrap-vue-3 library is not yet SSR ready.

For the moment, I use bootstrap-vue-3 in a SPA, so no SSR issue. With the idea of using it with Nuxt3 when the stable version is released.

In the meantime, I contribute with small PR to improve the Developer eXperience, like build *.d.ts, vitest, nuxt3 modules, deploy of the docs, fix VuePress, …

I think this project has a good approach using components (SFC) written in a simple and readable way. This should make it easy for more developers to contribute.

I see there are discussions about SSR, and different approaches, … I think they will succeed.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Tree shaking - MDN Web Docs Glossary
Tree shaking is a term commonly used within a JavaScript context to describe the removal of dead code. It relies on the import...
Read more >
Tree Shaking - webpack
Tree shaking is a term commonly used in the JavaScript context for dead-code elimination. It relies on the static structure of ES2015 module...
Read more >
Tree shaking - Wikipedia
In computing, tree shaking is a dead code elimination technique that is applied when optimizing code. Often contrasted with traditional single-library dead ...
Read more >
Tree-Shaking: A Reference Guide - Smashing Magazine
Simply put, tree-shaking means removing unreachable code (also known as dead code) from a bundle. As Webpack version 3's documentation states: “ ...
Read more >
Reduce JavaScript payloads with tree shaking -
Tree shaking is a form of dead code elimination. The term was popularized by Rollup, but the concept of dead code elimination has...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found