question-mark
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.

Bundle size increases with the plugin when used in a quasar project

See original GitHub issue

Hii @antfu, When a normal build is done on a quasar project, the build bundle size is 500kb smaller than a build with the plugin used.

Steps to reproduce

  • create a new quasar cli project
  • do a normal build
  • check dist/spa folder size
  • install unplugin-auto-import
  • add it in quasar config with the following presets installed
 chainWebpack(chain) {
        chain.plugin('unplugin-auto-import').use(
          AutoImportPlugin({
            // targets to transform
            include: [
              /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
              /\.vue$/,
              /\.vue\?vue/, // .vue
              /\.md$/, // .md
            ],

            // global imports to register
            imports: [
              // presets
              'vue',
              'vue-router',
              'vuex',
              'quasar',
            ],
          })
        );
      },
  • remove all vue API imports and run a build
  • check dist/spa folder size
  • it’s higher than that of the normal build

What’s expected

  • The bundle size should remain the same because we have Tree shaking in place

What happenes

  • The bundle size with the plugin is larger than without the plugin

Please let me know if you need a repo to reproduce. I did it with a project with around 20 .vue files and 10 plus .ts files

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:23 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
userquincommented, Oct 29, 2021

But it doesn’t add the the full esm prod bundle without the plugin. Do you think it’s kind of conflicting with the plugin? I mean the tree shaking of quasar conflicting with the plugin in any way?

Try file an issue on quasar repo, maybe there can address this, or wait to @antfu review.

1reaction
userquincommented, Oct 28, 2021

without unplugin-auto-import:

imagen

Read more comments on GitHub >

github_iconTop Results From Across the Web

Lazy Loading / Code Splitting
By default, Quasar includes packages from node_modules in a vendor chunk even if your code imports them dynamically. This increases the vendor chunk...
Read more >
Analyzing and Improving Bundle Size
the bundle size will increase as the time goes on and gradually slowing down our apps. What shall we do? There are some...
Read more >
How to Reduce Your Vue.JS Bundle Size With Webpack
To do that I installed webpack-bundle-analyzer. This will provide a visual guide to the size of items in each bundle. }; With the...
Read more >
How to drastically reduce your bundle size and load time in ...
Here's how we reduced the bundle size and load time of our Vue.js app. ... Webpack 3 requires you to use the DefinePlugin...
Read more >
Getting Started with the Quasar Framework
The Quasar Framework is a Vue.js-based framework used to develop ... To add Vue CLI Quasar Plugin, navigate to the created project and...
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 Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found