Bundle size significantly larger than expected when built with default vue3 setup

[acoulton]

Reproduction

https://github.com/acoulton/bug-pinia-build-size/runs/8035964674?check_suite_focus=true

Steps to reproduce the bug

Run the following script:

#!/bin/bash
#!/bin/bash

echo "Create projects"
npm init vue@latest vue-skeleton-no-pinia -- --default
npm init vue@latest vue-skeleton-with-pinia -- --default --pinia

echo "Install deps"
pushd vue-skeleton-no-pinia && npm install && popd
pushd vue-skeleton-with-pinia && npm install && popd

echo "Build without pinia"
pushd vue-skeleton-no-pinia && npm run build && popd

echo "Build with pinia"
pushd vue-skeleton-with-pinia && npm run build && popd

echo "--"
echo "--"
echo "--- file size comparison ---"
ls -lh vue-skeleton-*/dist/assets/index.*.js

Observe the following sections of the output:

> vue-skeleton-no-pinia@0.0.0 build
> vite build

vite v3.0.9 building for production...
✓ 23 modules transformed.
dist/assets/logo.da9b9095.svg    0.30 KiB
dist/index.html                  0.42 KiB
dist/assets/index.dd55cde3.css   3.59 KiB / gzip: 1.17 KiB
dist/assets/index.bf3237b2.js    61.05 KiB / gzip: 24.34 KiB

....

> vue-skeleton-with-pinia@0.0.0 build
> vite build

vite v3.0.9 building for production...
✓ 38 modules transformed.
dist/assets/logo.da9b9095.svg    0.30 KiB
dist/index.html                  0.42 KiB
dist/assets/index.dd55cde3.css   3.59 KiB / gzip: 1.17 KiB
dist/assets/index.669a57f9.js    75.29 KiB / gzip: 29.21 KiB

--
--
--- file size comparison ---
-rw-rw-r-- 1 andrew andrew 62K Aug 26 12:50 vue-skeleton-no-pinia/dist/assets/index.bf3237b2.js
-rw-rw-r-- 1 andrew andrew 76K Aug 26 12:50 vue-skeleton-with-pinia/dist/assets/index.669a57f9.js

Expected behavior

Per the Pinia homepage:

It is not clear whether this refers to gzipped or total size.

Actual behavior

With the default vue/vite/pinia configuration, including pinia increases the production build by ~14Kb raw / ~5Kb gzipped.

This can be confirmed in the github actions output for the reproduction case (https://github.com/acoulton/bug-pinia-build-size/runs/8035964674?check_suite_focus=true):

Additional information

This appears to be the same issue as #1015 which was closed as invalid.

I have opened as a new issue as I have a different reproduction case which I think shows more clearly that there is definitely an issue with either pinia or the documentation (e.g. details of how vue/vite should be configured to achieve the documented 1Kb package weight).

[acoulton]

Additionally, adding Pinia to a vue3 project that is still using vue-cli/webpack appears to add about 20kb to chunk-vendors. Appreciate that may be an unsupported configuration, but seemed worth mentioning.

[posva]

A workaround for this is to ensure the module version is used. e.g. with vite it's

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      pinia: fileURLToPath(
        new URL('./node_modules/pinia/dist/pinia.mjs', import.meta.url)
      ),
    },
  },
})

[acoulton]

@posva thanks very much for the rapid response.

I can confirm that workaround works with vite.

The equivalent workaround for webpack appears to be:

// vue.config.js
module.exports = {
  // ... other config
  configureWebpack: (config) => {
    config.resolve.alias.pinia = path.resolve(__dirname, '/node_modules/pinia/dist/pinia.mjs');
  }
}

That is correctly swapping to the .mjs source but only saves about 2kb.

Digging through the compiled chunk-vendors, it looks like it's not properly stripping the devtools code as dead code e.g. this:

const USE_DEVTOOLS = ((process.env.NODE_ENV !== 'production') || (typeof __VUE_PROD_DEVTOOLS__ !== 'undefined' && __VUE_PROD_DEVTOOLS__)) && !(process.env.NODE_ENV === 'test') && IS_CLIENT;

// ... other code

if (USE_DEVTOOLS) {
    registerPiniaDevtools(app, pinia);
}

is becoming this (not using the minified names for clarity):

const USE_DEVTOOLS = !1;
// ...
if (USE_DEVTOOLS) {
    registerPiniaDevtools(app, pinia);
}

// registerPiniaDevtools and all dependencies also included in output bundle.

I suspect this may just be a limitation of webpack / terser that I'll have to live with until we can migrate to vite.

[posva]

Thanks for the example with webpack!

About the minification with webpack, does it work with pinia@2.0.19 if you remove the line with "browser": "..." in the package.json file inside of the node_modules? (or use your workaround of alias)
If it works, then we want to revert to inlining the USE_DEVTOOLS expression everywhere instead of using a variable.

[acoulton]

pinia@2.0.19 appears to be the same, but it looks like it's actually 2.0.18 that is the last version before USE_DEVTOOLS was introduced?

Bumping back to 2.0.18 takes ~11kb off my chunk-vendors - webpack-bundle-analyser reports pinia taking 6.3kb parsed (2.88 gzipped), down from 17.07kb parsed(6.5kb gzipped).

Based on that I've also checked with 2.0.21 and just replacing all the current USE_DEVTOOLS with the inline definition ((process.env.NODE_ENV !== 'production') || (typeof __VUE_PROD_DEVTOOLS__ !== 'undefined' && __VUE_PROD_DEVTOOLS__)) && !(process.env.NODE_ENV === 'test') && IS_CLIENT - that works.

As far as I know I'm using the latest versions of vue-cli/webpack/etc.