bizcharts打包体积疑问

Question

// 第一种方式
import { Tooltip } from 'bizcharts';

// 第二种方式
import bizcharts from 'bizcharts';

为什么用第一种方式和第二种方式使用bizcharts,,打包之后的体积是一样的,是因为tree-shaking失效了吗?

Answer 1

1. 因为第一种方式通常就等效于：

   import BizCharts from 'bizcharts';
   BizCharts.Tooltip

2. JS 是个高度动态化的语言，打包工具很难判断一段代码与另一段代码的关系，也很难断定某段代码是不是不必要。所以出于可靠性考虑，最简单的策略是能打包进去的都打包进去，多下载点 JS 总比出 bug 好
3. 每个打包工具都提供了一些思路和规范，方便我们去除不必要的代码，这叫做 tree-shaking。比如 webpack 的 tree-shaking，建议你去阅读下。其它打包工具请自行寻找。
4. 按需加载（lazy-loading）则是另外一种思路，即确认这段代码是必要的，但是只在用到它的时候再加载