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 沒有引用不會打包。

但是npm包中，通過這種方式去引用，你會發(fā)現(xiàn) tree shaking 并沒有生效， 這是因為webpack無法識別你的代碼是否存在副作用，故而無法執(zhí)行tree shaking ，解決方法是給你的npm包 package.json 加上 sideEffects: false ，告訴webpack是無副作用的， webpack 可以放心處理。

什么是副作用( side effect )，即你的函數(shù)會對外部變量造成影響，比如

function a() {}
a.location = window.location
a.location.hash = 'll'

這就是一個副作用函數(shù)，所以編寫純函數(shù)

es6

如果你的npm包使用了es6的特性，比如類，最終你打包出來的代碼只打包了成了es5的，那么恭喜你，基本上你的npm包和 tree shaking 無緣了。

es6轉es5(babel)，會產(chǎn)生大量的副作用，所以基本上大部分包都提供es6版本的代碼， tree shaking 交給你本地的webpack去處理。

當然也不是完全沒有辦法，antd老大哥就開發(fā)了一個babel-plugin-import，實現(xiàn)精確引用的代碼的方式，但是你必須將每個模塊單獨分成一個文件。

總結

基本上tree shaking的解決方法就是導出es6模塊，同時標明自己是無副作用的，如果加上babel-plugin-import就更完美了

rollup的一個提案蠻有趣的！

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論