借助webpack對項目進行分析優化

Me_Kun 發布于2019-08-22 16:17 / 3474人閱讀

摘要：由于項目的不斷擴大，只會影響我們定位功能和問題的速度，因此對冗余文件進行清理，是很重要的。我們在項目中使用的，自動將各個圖標進行。

進入公司之后，接手的便是前人留下來的一個大項目。慶幸的是整個項目擁有完善的產品功能文檔，但是由于項目過于龐大，老舊。包含了打包過慢，冗余文件過多等諸多問題。想要快速的解決這些問題，想要完全把功能重構一遍的話，成本太高了。一個一個文件來過，時間成本也比較大。因此在此篇文章中，我們介紹一下我是如何配合webpack一步步進行分析，將項目進行優化的。
同時我針對思路封裝了一個webpack-unused-files，用于查找項目中的冗余文件，歡迎試用并star
原文鏈接

問題

首先，我們先大致看下我們都有什么問題，然后一步步進行解決

項目頻繁進行修改，冗余文件過多

部分第三方依賴濫用，想去除但是不知道在哪個文件中。或沒用，但是遺留在package.json里，

項目龐大，打包的結果過大，時間過長

刪除冗余文件

由于項目的頻繁改動，有很多文件已經不被使用并且沒有被刪除。由于項目的不斷擴大，只會影響我們定位功能和問題的速度，因此對冗余文件進行清理，是很重要的。但是我們單憑肉眼很難識別哪個文件是否被依賴的，因此還要通過webpack來解決。

1.獲取項目依賴的所有文件

我們來看一下webpack的輸出文件格式:

{
  ...
  chunks: [{
    name: "chunk-name",
    modules: [
      // 每個chunk中所有的依賴文件
    ]
  }]
  ...
}

所以說，根據這個stats.json，我們可以拿到在整個項目中拿到的所有項目文件:

/**
 * 查詢依賴的模塊
 */
function findSrcModules () {
  return new Promise((resolve, reject) => {
    fs.readFile(statPath, (err, data) => {
      if (err) return
      const json = JSON.parse(data)
      const assetsList = json.chunks
      let ret = []
      // 拿到所有chunk的所有依賴文件
      assetsList.forEach(chunk => {
        const modules = chunk.modules.map(item => item.name)
        ret = ret.concat(modules)
      })
      // 去除node_modules中的文件
      ret = ret.filter(item => item.indexOf("node_modules") < 0)
      resolve(ret)
    })
  })
}

通過這一步，我們可以拿到項目中，所有打包依賴的文件。

2.獲取項目中所有的文件

通過glob,我們可以獲取所有的文件:

function getAllFilesInSrc () {
  const pattern = "./src/**"

  return new Promise((resolve, reject) => {
    glob(pattern, {
      nodir: true
    }, (err, files) => {
      const ret = files.map(item => {
        return item.replace("./src", ".")
      })
      resolve(ret)
    })
  })
}

3.將兩個文件數組進行對比，然后進行刪除等操作：

將兩個數組進行對比，沒有出現在依賴中的文件，就是冗余文件。我們可以一鍵刪除

findSrcModules().then(ret => {
  getAllFilesInSrc().then(allFiles => {
    const unUsed = allFiles.filter(item => {
      return ret.indexOf(item) < 0
    })
    const join = p => path.join("./src", p)

    unUsed.forEach(file => {
      shelljs.rm(join(file))
    })
  })
})

分析第三方依賴

根據上述冗余文件的思路，我們同樣可以對第三方依賴進行處理，大致思路如下

獲取所有包含node_modules的依賴

將文件名進行截取、去重。獲取到所有的依賴

與package.json進行對比，拿到沒有使用的依賴

將對比結果進行分析，將不想使用的依賴保存下來

再次查找stat.json，查找該依賴的reson字段，獲取再哪里引用了該依賴，進行輸出

將依賴進行手動替換、刪除等操作

可以說，拿到了所有依賴及依賴關系，我們可以很靈活的對其進行處理，拿到我們想要的結果。

該功能后續也會更新到webpack-unused-files中去。

優化打包大小

讓人震驚的是，整個項目由于種種原因，打包后的大小有近20M的大小！雖然并不是TO C項目，并且針對頁面進行了代碼拆分和懶加載，但是作為一個“合格的前端”，這種現象是一定要修改的（沒錯！）。該如何下手呢？一個個的翻代碼，看看我們都引用了什么大依賴，看哪些項目過大未免太復雜了。我們看看webpack給我嗎提供了什么方案：

1.展示打包結果

我們知道，在webpack打包結束后，會自動在控制臺顯示打包結果。同時，他也提供了輸出依賴及大小的功能，我們執行以下參數, 便可將所有的依賴進行展示，并且看到他們的大小了。

webpack --display-modules --sort-modules-by size

結果類似這樣：

我們可以很快的定位到排名前幾的js文件或者第三方依賴，決定該如何對其進行處置。

2.可視化分析依賴

webpack提供了一個功能，將打包的所有依賴文件以及關系，以json格式進行輸出：

webpack --profile --json > stats.json

這是我們整篇文章的一個基礎，很多人基于此封裝了不少可視化分析的工具,可以直觀的看到各個
文件、chunk之間的依賴關系以及大小等，快速定位到大文件、大模塊

webpack analyse

webpack chart

3.優化方案

通過以上兩種方法，我們可以很好的對內容文件和依賴進行定位和分析，針對打包大小的優化方案網上已經有很多了，在此不再進行贅述，提供幾個思路及參考：

CommonsChunkPlugin提取公共代碼

dll-plugin進行大文件多帶帶打包，緩存

刪除無用的依賴（后面會提到

選擇性的棄用一些依賴

代碼壓縮

babel-polyfill

Scope Hoisting

優化打包時間

針對打包時間的優化的文章其實也很多了，我們在此僅提供一些思路。我們主要提一點，通過構建會發現，項目中引用了大量的svg圖標以及國旗圖標，每次在靜態資源處理中，打包時間就會變的特別慢。

我們在項目中使用的svg-sprite-loader，自動將各個svg圖標進行svg-spirte。但是我們知道，這些圖標一旦引用，我們很少進行修改。尤其是像國旗圖標這種，但是每次構建我們都需要進行重復打包。因此，我們可以提前把這些圖標進行svg-sprite。推薦一個網站，將各種svg圖標提前進行sprite并自動進行引用：

iconmoon

日常打包時間優化點

externals 避免打包大的第三方依賴

dll-plugin 預打包第三方依賴

happypack 多進程處理，緩存

緩存與增量構建

babel-loader?cacheDirectory

webpack cache:true

減少構建搜索或編譯路徑 alias resolve

具象打包的范圍 include exclude

總結

通過對webpack輸出依賴關系的json的分析，我們可以直觀的拿到以下數據：

所有依賴文件及其大小

每個依賴文件是被哪些文件引用的

項目依賴的第三方依賴

通過這些數據，我們可以很方便的對現有項目進行優化。

生命不息，倒騰不止。讓我們對所有的惡心代碼說再見！

云服務器 GPU云服務器對數據進行分析 2018對數據進行分析怎樣對數據進行分析怎么對數據進行分析

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94203.html

用十分之一的構建時間做一場頁面靜態資源依賴分析

摘要：不直接使用的原因很簡單首先構建一次實在太慢了，特別是有幾十個頁面存在的情況下，另一個原因是我只是想拿到資源依賴，我根本不想對整個前端進行一次構建，也不想生成任何。這就達到了本文題目中目的，用十分之一的構建時間做一場頁面靜態資源依賴分析。原文鏈接作者：梯田前言：所謂【靜態資源依賴分析】，指的是可以通過分析頁面資源后，可以以 json 數據或者圖表的方式拿到頁面資源間的依賴關系。比如 c...

B0B0 2019-05-22 11:33 評論0 收藏0
基于webpack4的VUE多頁腳手架

摘要：另外備注一部分參數的說明折疊有助于文檔樹中文本節點的空白區域對進行壓縮默認默認按照不同文件的依賴關系來排序。敲黑板講重點的當然目前這部分的文檔在官網還不是很全，所以這里我們參考了印記中文的說明文檔，指優化模塊。鏈接寫在前面為什么要自己手寫一個腳手架？如何去思考遇到的問題？正文鏈接原文鏈接 github whale-vue ——寫在前面 1、為什么要自己手寫...

張金寶 2019-08-23 18:40 評論0 收藏0
從零到一，新建webpack工程

摘要：指定啟用例如上述代碼，就使用和處理了除了以外的。設置當前的為，同樣這個配置也可以寫在中。設置目錄刪除注釋去除空格去除屬性引號復制靜態目錄將所以可能被請求的靜態文件，分別放在目錄下。結語本次從零到一，新建了一個腳手架。 react-sample-javascript 為了實現一個可定制化高的react工程，我們往往會自己搭建一個react工程。所以本文會從零開始搭建一個react腳手架工...

Code4App 2019-08-26 12:08 評論0 收藏0
webpack優化

摘要：使用要給項目構建接入動態鏈接庫的思想，需要完成以下事情把網頁依賴的基礎模塊抽離出來，打包到一個個單獨的動態鏈接庫中去。接入已經內置了對動態鏈接庫的支持，需要通過個內置的插件接入，它們分別是插件用于打包出一個個單獨的動態鏈接庫文件。 webpack優化查看所有文檔頁面：全棧開發，獲取更多信息。原文鏈接：webpack優化，原文廣告模態框遮擋，閱讀體驗不好，所以整理成本文，方便查找。 ...

ChanceWong 2019-08-22 17:34 評論0 收藏0
基于 react, redux 最佳實踐構建的 2048

摘要：最佳實踐一個文件一個組件。，這是包含的是無副作用的純函數式計算狀態操作的函數。，的啟動腳本，啟動開發模式，項目打包，運行單元測試等等。每次代碼推送到之前也會執行所有單元測試用例，全部通過才可以繼續推送。，首次安裝依賴包之后生成的文件。前段時間 React license 的問題鬧的沸沸揚揚，搞得 React 社區人心惶惶，好在最終 React 團隊聽取了社區意見把 license 換...

Eidesen 2019-08-21 17:00 評論0 收藏0