借助webpack對(duì)項(xiàng)目進(jìn)行分析優(yōu)化

Me_Kun 發(fā)布于2019-08-22 16:17 / 3537人閱讀

摘要：由于項(xiàng)目的不斷擴(kuò)大，只會(huì)影響我們定位功能和問題的速度，因此對(duì)冗余文件進(jìn)行清理，是很重要的。我們?cè)陧?xiàng)目中使用的，自動(dòng)將各個(gè)圖標(biāo)進(jìn)行。

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

問題

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

項(xiàng)目頻繁進(jìn)行修改，冗余文件過多

部分第三方依賴濫用，想去除但是不知道在哪個(gè)文件中?；驔]用，但是遺留在package.json里，

項(xiàng)目龐大，打包的結(jié)果過大，時(shí)間過長(zhǎng)

刪除冗余文件

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

1.獲取項(xiàng)目依賴的所有文件

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

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

所以說，根據(jù)這個(gè)stats.json，我們可以拿到在整個(gè)項(xiàng)目中拿到的所有項(xiàng)目文件:

/**
 * 查詢依賴的模塊
 */
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)
    })
  })
}

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

2.獲取項(xiàng)目中所有的文件

通過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.將兩個(gè)文件數(shù)組進(jìn)行對(duì)比，然后進(jìn)行刪除等操作：

將兩個(gè)數(shù)組進(jìn)行對(duì)比，沒有出現(xiàn)在依賴中的文件，就是冗余文件。我們可以一鍵刪除

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))
    })
  })
})

分析第三方依賴

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

獲取所有包含node_modules的依賴

將文件名進(jìn)行截取、去重。獲取到所有的依賴

與package.json進(jìn)行對(duì)比，拿到?jīng)]有使用的依賴

將對(duì)比結(jié)果進(jìn)行分析，將不想使用的依賴保存下來

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

將依賴進(jìn)行手動(dòng)替換、刪除等操作

可以說，拿到了所有依賴及依賴關(guān)系，我們可以很靈活的對(duì)其進(jìn)行處理，拿到我們想要的結(jié)果。

該功能后續(xù)也會(huì)更新到webpack-unused-files中去。

優(yōu)化打包大小

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

1.展示打包結(jié)果

我們知道，在webpack打包結(jié)束后，會(huì)自動(dòng)在控制臺(tái)顯示打包結(jié)果。同時(shí)，他也提供了輸出依賴及大小的功能，我們執(zhí)行以下參數(shù), 便可將所有的依賴進(jìn)行展示，并且看到他們的大小了。

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

結(jié)果類似這樣：

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

2.可視化分析依賴

webpack提供了一個(gè)功能，將打包的所有依賴文件以及關(guān)系，以json格式進(jìn)行輸出：

webpack --profile --json > stats.json

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

webpack analyse

webpack chart

3.優(yōu)化方案

通過以上兩種方法，我們可以很好的對(duì)內(nèi)容文件和依賴進(jìn)行定位和分析，針對(duì)打包大小的優(yōu)化方案網(wǎng)上已經(jīng)有很多了，在此不再進(jìn)行贅述，提供幾個(gè)思路及參考：

CommonsChunkPlugin提取公共代碼

dll-plugin進(jìn)行大文件多帶帶打包，緩存

刪除無(wú)用的依賴（后面會(huì)提到

選擇性的棄用一些依賴

代碼壓縮

babel-polyfill

Scope Hoisting

優(yōu)化打包時(shí)間

針對(duì)打包時(shí)間的優(yōu)化的文章其實(shí)也很多了，我們?cè)诖藘H提供一些思路。我們主要提一點(diǎn)，通過構(gòu)建會(huì)發(fā)現(xiàn)，項(xiàng)目中引用了大量的svg圖標(biāo)以及國(guó)旗圖標(biāo)，每次在靜態(tài)資源處理中，打包時(shí)間就會(huì)變的特別慢。

我們?cè)陧?xiàng)目中使用的svg-sprite-loader，自動(dòng)將各個(gè)svg圖標(biāo)進(jìn)行svg-spirte。但是我們知道，這些圖標(biāo)一旦引用，我們很少進(jìn)行修改。尤其是像國(guó)旗圖標(biāo)這種，但是每次構(gòu)建我們都需要進(jìn)行重復(fù)打包。因此，我們可以提前把這些圖標(biāo)進(jìn)行svg-sprite。推薦一個(gè)網(wǎng)站，將各種svg圖標(biāo)提前進(jìn)行sprite并自動(dòng)進(jìn)行引用：

iconmoon

日常打包時(shí)間優(yōu)化點(diǎn)

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

dll-plugin 預(yù)打包第三方依賴

happypack 多進(jìn)程處理，緩存

緩存與增量構(gòu)建

babel-loader?cacheDirectory

webpack cache:true

減少構(gòu)建搜索或編譯路徑 alias resolve

具象打包的范圍 include exclude

總結(jié)

通過對(duì)webpack輸出依賴關(guān)系的json的分析，我們可以直觀的拿到以下數(shù)據(jù)：

所有依賴文件及其大小

每個(gè)依賴文件是被哪些文件引用的

項(xiàng)目依賴的第三方依賴

通過這些數(shù)據(jù)，我們可以很方便的對(duì)現(xiàn)有項(xiàng)目進(jìn)行優(yōu)化。

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

GPU云服務(wù)器云服務(wù)器對(duì)數(shù)據(jù)進(jìn)行分析 2018對(duì)數(shù)據(jù)進(jìn)行分析怎樣對(duì)數(shù)據(jù)進(jìn)行分析怎么對(duì)數(shù)據(jù)進(jìn)行分析

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/94203.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Me_Kun

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

基于javaweb+jsp的機(jī)房設(shè)備管理系統(tǒng)

閱讀 1407·2021-11-25 09:43
當(dāng)程序員被問到如何形容你的專業(yè)時(shí)，他的回答亮了摸摸頭

閱讀 1961·2021-11-12 10:36
主機(jī)ip一般是什么-主機(jī)ip地址有什么要求？

閱讀 6287·2021-09-22 15:05
浮動(dòng)元素

閱讀 3535·2019-08-30 15:55
電競(jìng)CSGO數(shù)據(jù)API接口 - 【戰(zhàn)隊(duì)數(shù)據(jù)列表】API調(diào)用示例代碼

閱讀 2090·2019-08-26 14:06
Webpack 4.X 從入門到精通 - loader（五）

閱讀 3700·2019-08-26 12:17
使用React、Electron、Dva、Webpack、Node.js、Websocket快速構(gòu)建

閱讀 567·2019-08-23 17:55
#JavaScript# IE兼容

閱讀 2511·2019-08-23 16:23

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

借助webpack對(duì)項(xiàng)目進(jìn)行分析優(yōu)化

相關(guān)文章

用十分之一的構(gòu)建時(shí)間做一場(chǎng)頁(yè)面靜態(tài)資源依賴分析

**基于webpack4的VUE多頁(yè)腳手架**

**從零到一，新建webpack工程**

webpack優(yōu)化

基于 react, redux 最佳實(shí)踐構(gòu)建的 2048

發(fā)表評(píng)論

0條評(píng)論

Me_Kun

男|高級(jí)講師

TA的文章

基于javaweb+jsp的機(jī)房設(shè)備管理系統(tǒng)

當(dāng)程序員被問到如何形容你的專業(yè)時(shí)，他的回答亮了摸摸頭

主機(jī)ip一般是什么-主機(jī)ip地址有什么要求？

浮動(dòng)元素

電競(jìng)CSGO數(shù)據(jù)API接口 - 【戰(zhàn)隊(duì)數(shù)據(jù)列表】API調(diào)用示例代碼

Webpack 4.X 從入門到精通 - loader（五）

使用React、Electron、Dva、Webpack、Node.js、Websocket快速構(gòu)建

#JavaScript# IE兼容

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

借助webpack對(duì)項(xiàng)目進(jìn)行分析優(yōu)化

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！