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 進(jìn)行 tree shaking 能夠不打包 function b 的代碼，這是因?yàn)?nbsp;webpack 對(duì)代碼進(jìn)行了分析， b 沒(méi)有引用不會(huì)打包。

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

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

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

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

es6

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

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

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

總結(jié)

基本上tree shaking的解決方法就是導(dǎo)出es6模塊，同時(shí)標(biāo)明自己是無(wú)副作用的，如果加上babel-plugin-import就更完美了

rollup的一個(gè)提案蠻有趣的！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論