按需引入和Treeshaking的区别

按需引入是在babel编译过程中，按需只引入相关代码。
tree shaking是在webpack打包阶段，移除 JavaScript 上下文中的未引用代码。

以vant组件库为例

如果全量引入

// src/main.js
// ...
import Vant from 'vant';
import 'vant/lib/index.css';
const { Button } = Vant
Vue.component(Button.name, Button)
// ...

那么打包后的体积

全量引入

如果使用按需引入

// src/main.js
// ...
import { Button } from 'vant';
Vue.component(Button.name, Button)
// ...

// babel.config.js
// ...
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        // 指定样式路径
        style: (name) => `${name}/style/less`,
      },
      'vant',
    ],
  ]
// ...

那么打包后的体积

按需引入

其本质是在babel编译阶段将部分代码做了替换

// 被替换的代码
// import { Button } from 'vant';
// Vue.component(Button.name, Button)

// 替换为如下代码
import "vant/es/button/style/less";
import _Button from "vant/es/button";
Vue.component(_Button.name, _Button);

tree shaking

如果我们任然这么写

// // src/main.js
import { Button } from 'vant';
Vue.component(Button.name, Button)

同时注释掉babel.config.js的按需加载部分

  // plugins: [
  //   [
  //     'import',
  //     {
  //       libraryName: 'vant',
  //       libraryDirectory: 'es',
  //       // 指定样式路径
  //       style: (name) => `${name}/style/less`,
  //     },
  //     'vant',
  //   ],
  // ]

打包后结果如下

tree-shaking

1. 没有css文件，因为我们本来就没有引入css文件
2. js的体积没什么变化。和想象中的不一样，没有了按需加载，应该会把全部的js都引入进来。
   因为webpack4默认开启了treeshaking这个功能，[webpack官方解释]
   webpack官网解释
   (https://www.webpackjs.com/guides/tree-shaking/)
   查看vant的package.json文件，确实也配置了sideEffects

// node_modules/vant/package.json
// ...
  "sideEffects": [
    "es/**/style/*",
    "lib/**/style/*",
    "*.css",
    "*.less"
  ],
// ...

如果我们把上面这段删除，再次打包

删除sideEffects后

js部分又变成全量打包了。