生产环境带@vue/devtools-api

[xiaochentianyu]

Version

6.2.1

Browser and OS info

Chrome 62 / Windows 10

Steps to reproduce

只要带有vue-router/vuex等使用了@vue/devtools-api的包，打包之后就会有。使用@vue/cli创建的模板即可重现

What is expected?

未设置时，打包生产环境不带@vue/devtools-api

What is actually happening?

不论设置与否，打包都会带@vue/devtools-api

[sodatea]

无法复现。

正常来说，Vue CLI 里实际用到的不是 dist/vue-router.prod.cjs 而是 dist/vue-router.mjs。 在这个文件里，对 devtools 相关调用是放在一个 if 语句里的，webpack 在压缩和 tree-shaking 之后是会去掉相关引用的，不会出现在最终的构建产物里。 https://unpkg.com/browse/[email protected]/dist/vue-router.mjs#L3536

如果你的项目无法正确去掉这段代码，有一个可能是你没有直接使用 vue-router，而是用了一个依赖于 vue-router 的包，那个包的导出是 cjs 格式而不是 esm，导致 webpack 无法正确 tree-shaking。

[xiaochentianyu]

无法复现。

正常来说，Vue CLI 里实际用到的不是 dist/vue-router.prod.cjs 而是 dist/vue-router.mjs。 在这个文件里，对 devtools 相关调用是放在一个 if 语句里的，webpack 在压缩和 tree-shaking 之后是会去掉相关引用的，不会出现在最终的构建产物里。 https://unpkg.com/browse/[email protected]/dist/vue-router.mjs#L3536

如果你的项目无法正确去掉这段代码，有一个可能是你没有直接使用 vue-router，而是用了一个依赖于 vue-router 的包，那个包的导出是 cjs 格式而不是 esm，导致 webpack 无法正确 tree-shaking。

系统：windows 10 node：v16.13.1 npm: v8.1.2 vue/cli创建项目，选择如下

Manually select features

() Babel () Router (*) Linter / Formatter

3.x

确认可复现

vite创建 使用模板未发现问题 npx degit pohunchn/vite-ts-quick#main 自己写的发现仍然有

[sodatea]

哦这个界面的数据不太准的…… 你运行一下 yarn build --report 然后打开 dist/report.html 看那个报告会更准确一点，这个分析结果里是没有 @vue/devtools-api 的。

[skadiD]

同样 vite 环境，使用 vite 官方模板进行创建，手动引入 vue-router 或 pinia 后 build 检索 devtool 发现存在诸多结果，同时在 rollup 中打印 module_name，可明显发现导入了 devtool 相关包

另外设置 __VUE_PROD_DEVTOOLS__ 和 isProduction 情况下打包后，仍可通过 强制激活脚本进入 devtools 界面且可获取 router 和 pinia 状态管理

demo: https://stackblitz.com/edit/vitejs-vite-t3mvfg

[Azurewarth0920]

@skadiD 引入了 devtool 是因为这个这个库的不正确的 bundle (没有 esm bundle)

Pinia/Vue-router/devtool 并没有问题。在去除这个库之后 devtool 的相关 package 就不会再被 bundle 了。