Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/vuejs/vuex/issues/1906 below:

tree shaking not work because of vuex.mjs · Issue #1906 · vuejs/vuex · GitHub

4.0.0-rc.2

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

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

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.

drop createLogger from the bundle

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"

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4