TreeShaking ​

1. 尽量使用export {} 导出代码

使用这样的写法，webpack才能做tree-shaking

export {
  xxx
}

export {
  xxx
}

2. 不要使用babel将esm转为cjs

若代码是commonjs代码，将失去tree-shaking优化，需要设置baberc配置中的modules: false

3. lib库酌情使用 sideEffects

通过设置package.json中的sideEffects字段，可以告诉webpack哪些是纯的（无副作用）

4. 使用 unplugin-vue-components 或 babel-plugin-import 按需引入组件

5. 可以使用 /*#PURE */ 标记哪些函数调用没有副作用，进而tree-shaking

6. 异步模块标记哪些导出被使用

import(/* webpackExports: ["foo", "default"] */ "./foo").then((module) => {
  console.log(module.foo);
});

import(/* webpackExports: ["foo", "default"] */ "./foo").then((module) => {
  console.log(module.foo);
});