webpack的tree shaking

• util.js

export const a = () => {
  console.log("a123456方法");
};
export const b = () => {
  console.log("b123456方法");
};
复制代码

• main.js

import {a} from './utils';
a();
复制代码

sideEffects

通常而言，上述代码，在webpack进行tree shaking可以不打包function b的代码，这是由于webpack对代码进行了分析，b没有引用不会打包。ps: export default不能tree shaking

• 可是npm包中，经过这种方式去引用，你会发现tree shaking并无生效，这是由于webpack没法识别你的代码是否存在反作用，故而没法执行tree shaking，解决方法是给你的npm包package.json加上sideEffects: false，告诉webpack是无反作用的，webpack能够放心处理。

什么是反作用(side effect)，即你的函数会对外部变量形成影响，好比

function a() {}
a.location = window.location
a.location.hash = 'll'
复制代码

这就是一个反作用函数，因此编写纯函数

es6

若是你的npm包使用了es6的特性，好比类，最终你打包出来的代码只打包了成了es5的，那么恭喜你，基本上你的npm包和tree shaking无缘了。
es6转es5(babel)，会产生大量的反作用，因此基本上大部分包都提供es6版本的代码，tree shaking交给你本地的webpack去处理。

固然也不是彻底没有办法，antd老大哥就开发了一个babel-plugin-import，实现精确引用的代码的方式，可是你必须将每一个模块单独分红一个文件。

总结

基本上tree shaking的解决方法就是导出es6模块，同时标明本身是无反作用的，若是加上babel-plugin-import就更完美了

rollup的一个提案蛮有趣的！