Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

tree shaking not work because of vuex.mjs #1906

Closed
fangbinwei opened this issue Dec 18, 2020 · 1 comment
Closed

tree shaking not work because of vuex.mjs #1906

fangbinwei opened this issue Dec 18, 2020 · 1 comment

Comments

@fangbinwei
Copy link

@fangbinwei fangbinwei commented Dec 18, 2020

Version

4.0.0-rc.2

Reproduction link

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

Steps to reproduce

  1. yarn build
  2. 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)

  1. vuex.mjs use default import
  2. 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

fangbinwei added a commit to fangbinwei/vuex that referenced this issue Dec 18, 2020
kiaking pushed a commit that referenced this issue Jan 25, 2021
fix #1906
kiaking added a commit that referenced this issue Jan 25, 2021
@kiaking
Copy link
Member

@kiaking kiaking commented Jan 25, 2021

The fixed is merged. This should be fixed in new release!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants