devtools
devtools copied to clipboard
生产环境带@vue/devtools-api
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
无法复现。
正常来说,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。
无法复现。
正常来说,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 自己写的发现仍然有
哦这个界面的数据不太准的……
你运行一下 yarn build --report
然后打开 dist/report.html
看那个报告会更准确一点,这个分析结果里是没有 @vue/devtools-api
的。
同样 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
@skadiD 引入了 devtool 是因为这个这个库的不正确的 bundle (没有 esm bundle)
Pinia/Vue-router/devtool 并没有问题。在去除这个库之后 devtool 的相关 package 就不会再被 bundle 了。