您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關webpack的tree shaking的實現,文章內容質量較高,因此小編分享給大家做個參考,希望大家閱讀完這篇文章后對相關知識有一定的了解。
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包中,通過這種方式去引用,你會發現 tree shaking 并沒有生效, 這是因為webpack無法識別你的代碼是否存在副作用,故而無法執行tree shaking ,解決方法是給你的npm包 package.json 加上 sideEffects: false ,告訴webpack是無副作用的, webpack 可以放心處理。
什么是副作用( side effect ),即你的函數會對外部變量造成影響,比如
function a() {} a.location = window.location a.location.hash = 'll'
關于webpack的tree shaking的實現就分享到這里了,希望以上內容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。