webpack的tree shaking的實現(xiàn)方法
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轉(zhuǎn)es5(babel)，會產(chǎn)生大量的副作用，所以基本上大部分包都提供es6版本的代碼， tree shaking 交給你本地的webpack去處理。
當然也不是完全沒有辦法，antd老大哥就開發(fā)了一個babel-plugin-import，實現(xiàn)精確引用的代碼的方式，但是你必須將每個模塊單獨分成一個文件。
總結(jié)
基本上tree shaking的解決方法就是導出es6模塊，同時標明自己是無副作用的，如果加上babel-plugin-import就更完美了
rollup的一個提案蠻有趣的！
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本篇文章主要介紹了詳解webpack-dev-server的簡單使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
基于element?UI?input組件自行封裝“數(shù)字區(qū)間”輸入框組件的問題及解決
這篇文章主要介紹了基于element?UI?input組件自行封裝“數(shù)字區(qū)間”輸入框組件,實現(xiàn)代碼可以分為兩塊一塊為組件的封裝代碼，一塊為文中實現(xiàn)效果的演示代碼，對element?UI數(shù)字區(qū)間輸入組件相關知識感興趣的朋友一起看看吧2022-05-05
js中的eventType事件想必大家都不陌生吧，下面為大家詳細介紹下一般的事情及瀏覽器支持性，感興趣的朋友可以參考下2013-11-11
圖片的上傳預覽功能主要用于圖片上傳前的一個效果的預覽，這篇文章主要介紹了Javascript圖片上傳前的本地預覽實例,需要的朋友可以參考下2014-06-06
javascript+ajax實現(xiàn)產(chǎn)品頁面加載信息
本文給大家分享的是使用javascript結(jié)合ajax實現(xiàn)產(chǎn)品頁面無刷新加載信息的代碼，非常的簡單實用，有需要的小伙伴可以參考下。2015-07-07
JS+CSS實現(xiàn)電子商務網(wǎng)站導航模板效果代碼
這篇文章主要介紹了JS+CSS實現(xiàn)電子商務網(wǎng)站導航模板效果代碼,涉及JavaScript結(jié)合css動態(tài)操作頁面元素屬性的相關技巧,非常具有實用價值,需要的朋友可以參考下2015-09-09
讓背景如此暗淡（一種彈出提示信息時頁面背景色調(diào)改變的方法）
讓背景如此暗淡（一種彈出提示信息時頁面背景色調(diào)改變的方法）...2006-10-10
Frame與Iframe兩者可以實現(xiàn)的功能基本相同，不過Iframe比Frame具有更多的靈活性，通過本文給大家詳解細節(jié)iframe與frame的區(qū)別，對iframe與frame的區(qū)別相關知識感興趣的朋友一起學習吧2016-01-01
JavaScript中關于Object.create()的用法
這篇文章主要介紹了JavaScript中關于Object.create()的用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
本文主要介紹了canvas的相關知識。具有很好的參考價值，下面跟著小編一起來看下吧2017-01-01