Bundle size increases with the plugin when used in a quasar project about unplugin-auto-import HOT 23 CLOSED

You can also try it with vite instead webpack: https://quasar.dev/start/vite-plugin (wait reload prompt from the PWA, maybe you get a 404)

from unplugin-auto-import.

node v14.17.4

from unplugin-auto-import.

Hii @userquin thank for your patience here is the repo https://github.com/soulsam480/unplugin-bundle-reproduce I've added the steps in readme. Thanks

from unplugin-auto-import.

@soulsam480 the size of vue seems to be correct, just mouse over @vue on the browser, you'll see something this:

from unplugin-auto-import.

If you add 452.75Kb of quasar to the 196Kb original vendors we get ~ 680Kb vendors chunk:

from unplugin-auto-import.

without unplugin-auto-import:

from unplugin-auto-import.

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.

from unplugin-auto-import.

@soulsam480 try adding unplugin-vue-components, see:

• #51 (comment)

from unplugin-auto-import.

Hii this is a Quasar CLI project, and I can't migrate to a vite based project, this is a pretty huge one. Is it a known issue ? I mean the bundle size ?

from unplugin-auto-import.

I think it is a problem with webpack + quasar and treeshaking (use import { QBtn, ... } from 'quasar', I have never use quasar), for exmaple using vuetify 2 with vue cli the initial/vendor chunk is huge since you need a few components.

from unplugin-auto-import.

I think it is a problem with webpack + quasar and treeshaking (use import { QBtn, ... } from 'quasar', I have never use quasar), for exmaple using vuetify 2 with vue cli the initial/vendor chunk is huge since you need a few components.

But here in my case, auto-import only handles vue, vue-router and quasar API (excluding components). So I'm assuming this is an issue with the handling of tree shaking in API imports. From the config I believe this should be the expected behavior right ?

from unplugin-auto-import.

I think it is a problem with webpack + quasar and treeshaking (use import { QBtn, ... } from 'quasar', I have never use quasar), for exmaple using vuetify 2 with vue cli the initial/vendor chunk is huge since you need a few components.

Another reason this is not an issue with quasar tree shaking of components -> without the plugin the bundle size is less and in both the scenarios quasar handles auto-importing and tree shaking of components.

from unplugin-auto-import.

@antfu Hii, any help on this ?

from unplugin-auto-import.

@soulsam480 can you provide a repro?

from unplugin-auto-import.

@soulsam480 can you provide a repro?

Sure let me setup a repo quickly

from unplugin-auto-import.

@soulsam480 I'll try to take a look later, too busy at work (4/5 hours)...

Provide also node version used.

from unplugin-auto-import.

@soulsam480

Seems the problem is quasar, it is adding the full esm-prod version, just add webpack-bundle-analyzer on your project on main branch: yarn add -D webpack-bundle-analyzer then configure it before unplugin-auto-import plugin, then run yarn build, the analyzer will open the result on browser:

      ...
      chainWebpack(chain) {
        chain.plugin('webpack-bundle-analyzer').use(new BundleAnalyzerPlugin())
        chain.plugin('unplugin-auto-import').use(
          AutoImportPlugin({...})
        );
      },
      ...

This entry vendor.f42cad09.js │ 687.44 KB contains this (see below the output for auto-import):

Your version with auto-import:

 ╔═════════════════════╤═══════════╤═══════════╗
 ║               Asset │      Size │   Gzipped ║
 ╟─────────────────────┼───────────┼───────────╢
 ║    app.31d6cfe0.css │   0.00 KB │   0.02 KB ║
 ║ vendor.8ba9cf3e.css │ 184.17 KB │  33.20 KB ║
 ╟─────────────────────┼───────────┼───────────╢
 ║      31.4239d4f1.js │   3.48 KB │   1.39 KB ║
 ║     608.2c8e64bf.js │  43.53 KB │   2.81 KB ║
 ║     992.fc4fa29d.js │   0.77 KB │   0.50 KB ║
 ║     app.e6709996.js │   4.26 KB │   2.10 KB ║
 ║  vendor.f42cad09.js │ 687.44 KB │ 213.16 KB ║
 ╚═════════════════════╧═══════════╧═══════════╝

without auto-import:

 ╔═════════════════════╤═══════════╤══════════╗
 ║               Asset │      Size │  Gzipped ║
 ╟─────────────────────┼───────────┼──────────╢
 ║    app.31d6cfe0.css │   0.00 KB │  0.02 KB ║
 ║ vendor.8ba9cf3e.css │ 184.17 KB │ 33.20 KB ║
 ╟─────────────────────┼───────────┼──────────╢
 ║     293.6baa7543.js │   0.77 KB │  0.50 KB ║
 ║     592.770280ee.js │   3.49 KB │  1.39 KB ║
 ║     948.05ae9432.js │  43.47 KB │  2.81 KB ║
 ║     app.bcf23d9f.js │   4.29 KB │  2.12 KB ║
 ║  vendor.2149e36a.js │ 196.28 KB │ 68.34 KB ║
 ╚═════════════════════╧═══════════╧══════════╝

from unplugin-auto-import.

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?

from unplugin-auto-import.

I don't know.

The unplugin-auto-import use typeof import('quasar')['useQuasar'] and seems it is resolved from the esm, then added to the dist?.

/cc @antfu can you take a look at this?

from unplugin-auto-import.

I don't know.

The unplugin-auto-import use typeof import('quasar')['useQuasar'] and seems it is resolved from the esm, then added to the dist?.

/cc @antfu can you take a look at this?

No problem. Let's wait for him to review

from unplugin-auto-import.

@antfu Hey, can you help on this, please

from unplugin-auto-import.

Some additional information to see if that might help solving the issue: if you just use useQuasar() from your pages or components, the esm.prod isn't added to the bundle.
However, if you do declare it as a lookup in the auto-import config, it'll add it.

from unplugin-auto-import.

All this plugin does is injecting the import statements for the modules and nothing else. I believe this is more like a bundler or deps resolving issue. I am open for PR that fix the preset if there is anything missing, otherwise, this is considered out-of-scope.

from unplugin-auto-import.