Webpack 开启 Tree Shaking 后，Vue 组件里的未使用方法为啥没被删掉？
我用 Webpack 5 + Vue 2 做项目，明明开启了 Tree Shaking，但发现一些没用到的 methods 还是被打包进去了，体积下不来。我试过把 mode 设成 production，也确认用了 ES6 模块语法，但好像对 Vue 单文件组件里的 methods 无效？
比如下面这个组件，我只用了 handleClick，但 handleUnused 也被打包了：
<template>
<button @click="handleClick">点我</button>
</template>
<script>
export default {
methods: {
handleClick() { console.log('used'); },
handleUnused() { console.log('unused!'); }
}
}
</script>- 2
回答
33浏览
为什么启用Webpack5的Tree Shaking后某些未用代码没被清除？
最近在升级项目到Webpack5时，按文档配置了Tree Shaking，但发现第三方库里的未使用方法还是被打包进bundle里了。明明在package.json加了"sideEffects": fa...
- 1
回答
69浏览
为什么Webpack配置了Tree Shaking后，某些未引用的代码依然被打包进去？
我在项目里配置了Webpack的Tree Shaking，但发现未使用的模块还是被打包了。比如这个组件里只用了utils.js的add函数： // component.jsx import { add...
- 2
回答
34浏览
为什么我的Webpack配置了Tree Shaking还是没摇掉未使用的代码？
我在项目里按教程配置了Webpack的Tree Shaking，把mode设成production，也设置了optimization.usedExports为true，但打包后的bundle里还是能看...
- 1
回答
7浏览
Tree Shaking 为什么没把我的 Vue 组件里没用的函数删掉？
我用 Vite + Vue 3 开发，发现打包后一些没引用的工具函数还在 bundle 里。明明开启了 Tree Shaking，是不是因为 sideEffects 配置不对？ 比如下面这个组件，只用...
- 2
回答
54浏览
为什么我的模块未使用代码无法被Tree Shaking清除？
我在用Webpack打包项目时启用了Tree Shaking，但发现即使某些模块的方法没有被调用，打包后的文件里还是包含了它们。比如我定义了一个工具类：export function useA() {...
- 1
回答
43浏览
Babel配置会影响Tree Shaking效果吗？
我最近在优化项目打包体积，发现即使用了ES Module，Webpack的Tree Shaking好像也没生效。我怀疑是不是Babel的配置有问题，因为看到有人说Babel会把import/expor...
- 1
回答
17浏览
为什么Webpack Tree Shaking没摇掉未使用的CSS样式？
大家好，我在优化项目时遇到个奇怪的问题。我按文档配置了Tree Shaking，但打包后的CSS里还是有很多没用的样式类。 比如这个组件只用了.red类，但打包结果里blue和green类也存在： /...
- 1
回答
19浏览
Webpack优化后打包体积没变化，哪里出问题了？
我在React项目里配置了Webpack的压缩和Tree Shaking，但打包体积还是很大。比如这个组件里只用了lodash的get方法： import _ from 'lodash�...
- 2
回答
47浏览
为什么我的Webpack配置无法正确执行Tree Shaking？
我在Vue项目里用lodash时按需引入了方法，但打包后发现完整lodash库还是被包含进去了。配置了webpack.optimization.usedExports为true也没用，这是怎么回事？ ...
- 2
回答
25浏览
为什么用lodash-es按需导入后Tree Shaking没减少打包体积？
我在项目里改用lodash-es想通过Tree Shaking减小体积，但打包后发现整个lodash都进去了... 按教程这样导入的： import { map, each } from '...
methods是通过对象字面量定义的，Webpack 的 Tree Shaking 识别不了这种动态结构，因为它没法静态分析出哪些方法被用了、哪些没被用。Tree Shaking 只对 ES Module 的
import/export生效，而 Vue 的export default { methods: { ... } }是 CommonJS 风格的对象，Webpack 默认认为整个对象都有可能被用到，所以不会删掉任何字段。解决方案有两个：
一个是升级到 Vue 3 +