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的一個提案蠻有趣的！