webpack學習(三) -- js tree shaking

前言：上文咱們說到配置webpack的兩種方式，命令行配置和配置文件配置。本文再補充一種方式:

• package.json中配置: 在package.json中有一個scripts對象

  

1.dev爲開發環境，能夠配置打包環境爲development，這時候運行npm run dev，就能夠看到文件被打包了;

2.prod爲生產環境 npm run prod

3.test爲測試環境 npm run test

咳咳。。。步入正題

tree shaking簡介

• 啥是tree shaking?
  • 翻譯過來就是樹抖動，樹抖動都是會把葉子都下來，那麼代碼抖動會都下來什麼呢？固然是代碼啦~tree shaking會在生產環境下打包時把沒有使用到的代碼剔除掉，減少打包後js的體積，開發環境下不會剔除。

js tree shaking

案例說話

• 在sum文件中有兩個模塊aaa和isArray

  

• index.html文件中引入打包後文件'.dist/main.js'

  

• index.js文件中引入sum中aaa模塊，沒有引入isArray模塊

  

• 執行npm run dev，控制檯輸出正確的打印結果

  

• 在打包後的main.js文件中搜索aaa，發現能找到

  

• 再在main.js中找isArray，發現居然也能找到

  

這也沒有抖動剔除的效果呀，到這是否是以爲我上文說的都是廢話╮(╯▽╰)╭，耐心往下看~

上述狀況是由於咱們剛纔執行的是npm run dev,是開發環境下的。接下來讓咱們看一下生產環境是什麼現象。

• 執行npm run prod,打包的是壓縮版本,會發現有aaa，沒有isArray

  

  

因此，在生產環境下，tree shaking就發揮了抖動做用，把沒有用到的代碼都抖掉

---

提高難度

上述案例是很是簡單的，下面咱們來挑戰一下有難度的知識。

---

loadsh、loadsh-es

loadsh是一個一致性、模塊化、高性能的javascript實用工具庫，loadsh-es是由loadsh導出的工具庫。

• 將loadsh引入頁面Js中

  

• 因如今項目中沒有loadsh-es，因此安裝loadsh-es

  

• 將isArray傳入一個arg函數，再在loadsh裏尋找isArray函數，打印執行這個函數（到這是否是一臉茫然，耐心往下看~）

  

• 已經知道開發環境不會過濾沒用的代碼，這裏就不演示了，咱們直接看生產環境。用npm run prod,會發現，在js沒用到isArray的狀況下，它仍是把Loadsh包打進去了，這就不符合咱們以前驗證的理論了。

  

雖然案例中沒有用到isArray，可是它分析的時候發現isArray裏用到了Loadsh,它只能作當前代碼中詞法語法的分析，不能作scoped的分析，也就是說不能作js做用域的分析。

解決辦法

爲了還達到咱們最開始的抖動目的,有一個好用的插件推薦給大家~讓代碼進行深度的抖動

• webpack-deep-scope-plugin

git地址：github.com/vincentdcha…

• 插件使用
  • 下載

  yarn add webpack-deep-scope-plugin
  複製代碼

  • 在webpack.config.js配置文件中引入並配置到plugins中

    

  • 執行npm run prod，發現沒有用到的loadsh也被抖掉啦！

    

---

總結

• tree shaking就是找到咱們代碼中真正使用的代碼，剔除沒有被用到的代碼。
• 優勢：
  • 減小頁面的加載時間
  • 不打包沒有使用的代碼
  • 減少js文件大小，用戶使用時減小用戶等待時間

---

思考

本文主要講了js的tree shaking，思考一下css tree shaking是什麼意思呢？webpack學習(四)會詳細說一下css tree shaking