Bundle size increases with the plugin when used in a quasar project
See original GitHub issueHii @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:
- Created 2 years ago
- Comments:23 (1 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Try file an issue on
quasar
repo, maybe there can address this, or wait to@antfu
review.without
unplugin-auto-import
: