tree shaking not work because of vuex.mjs · Issue #1906 · vuejs/vuex (original) (raw)

Version

4.0.0-rc.2

Reproduction link

https://github.com/fangbinwei/vuex-next-issue

Steps to reproduce

yarn build
search prev state in dist/main.js to validate if bundle contains createLogger

logger.log('%c prev state', 'color: #9E9E9E; font-weight: bold', transformer(prevState))

main.js

// tree shaking not work because of vuex.mjs import {Store} from 'vuex'

console.log(Store)

output(external vue)

[webpack-cli] Compilation finished asset main.js 12.1 KiB [emitted] [minimized] (name: main) 2 related assets orphan modules 400 bytes [orphan] 1 module runtime modules 221 bytes 1 module built modules 35.6 KiB [built] ./src/index.js 1 modules 567 bytes [built] [code generated] ./node_modules/vuex/dist/vuex.cjs.js 35 KiB [built] [code generated] external "Vue" 42 bytes [built] [code generated] webpack 5.11.0 compiled successfully in 713 ms ✨ Done in 3.59s.

main.js

// tree shaking work import {Store} from 'vuex/dist/vuex.esm-bundler.js'

console.log(Store)

output(external vue)

[webpack-cli] Compilation finished asset main.js 9.8 KiB [emitted] [minimized] (name: main) 2 related assets orphan modules 35.1 KiB [orphan] 2 modules runtime modules 221 bytes 1 module ./src/index.js 2 modules 35.3 KiB [not cacheable] [built] [code generated] webpack 5.11.0 compiled successfully in 797 ms ✨ Done in 2.47s.

What is expected?

drop createLogger from the bundle

What is actually happening?

bundle contains createLogger

I think tree shaking not work because of two reasons, (I know vuex.mjs wrap vuex.cjs.js because of some rules in node)

vuex.mjs use default import
vuex.mjs import CommonJS(vuex.cjs.js)

Maybe we can do like below

"exports": { ".": {

 "module": "./dist/vuex.esm-bundler.js",
"require": "./dist/vuex.cjs.js",
"import": "./dist/vuex.mjs"

}, "./": "./" },

nodejs don't support module in exports, so it can execute dist/vuex.mjs

webpack support module in exports, it will use dist/vuex.esm-bundler.js first if it is valid, since the order of "module" is in front of the "import"

Moreover

since vuex.mjs wrap CommonJS which contains require('vue') and it let vuex doesn't compatiable with webpack externals script, check this issue. Reproduction link