按需引入是在babel編譯過(guò)程中，按需只引入相關(guān)代碼。
tree shaking是在webpack打包階段，移除 JavaScript 上下文中的未引用代碼。

以vant組件庫(kù)為例

如果全量引入

// 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',
    ],
  ]
// ...

那么打包后的體積

按需引入

其本質(zhì)是在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

如果我們?nèi)稳贿@么寫(xiě)

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

同時(shí)注釋掉babel.config.js的按需加載部分

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

打包后結(jié)果如下

tree-shaking

1. 沒(méi)有css文件，因?yàn)槲覀儽緛?lái)就沒(méi)有引入css文件
2. js的體積沒(méi)什么變化。和想象中的不一樣，沒(méi)有了按需加載，應(yīng)該會(huì)把全部的js都引入進(jìn)來(lái)。
   因?yàn)閣ebpack4默認(rèn)開(kāi)啟了treeshaking這個(gè)功能，[webpack官方解釋]
   
   webpack官網(wǎng)解釋
   
   (https://www.webpackjs.com/guides/tree-shaking/)
   查看vant的package.json文件，確實(shí)也配置了sideEffects

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

如果我們把上面這段刪除，再次打包

刪除sideEffects后

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