進入公司以後，接辦的就是前人留下來的一個大項目。光榮的是全部項目具有完美的產物功用文檔，然則因為項目過於巨大，老舊。包括了打包過慢，冗餘文件過量等諸多題目。想要疾速的措置懲罰這些題目，想要完整把功用重構一遍的話，本錢太高了。一個一個文件來過，時候本錢也比較大。因而在此篇文章中，我們引見一下我是怎樣合營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))
    })
  })
})

剖析第三方依靠

依據上述冗餘文件的思緒，我們一樣能夠對第三方依靠舉行措置懲罰，大抵思緒以下

1. 獵取一切包括node_modules的依靠
2. 將文件名舉行截取、去重。獵取到一切的依靠
3. 與package.json舉行對照，拿到沒有運用的依靠
4. 將對照效果舉行剖析，將不想運用的依靠保留下來
5. 再次查找stat.json，查找該依靠的reson字段，獵取再那裡援用了該依靠，舉行輸出
6. 將依靠舉行手動替代、刪除等操縱

能夠說，拿到了一切依靠及依靠關聯，我們能夠很天真的對其舉行措置懲罰，拿到我們想要的效果。

該功用後續也會更新到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的剖析，我們能夠直觀的拿到以下數據：

• 一切依靠文件及其大小
• 每一個依靠文件是被哪些文件援用的
• 項目依靠的第三方依靠

經由過程這些數據，我們能夠很輕易的對現有項目舉行優化。

性命不息，搗騰不止。讓我們對一切的噁心代碼說再會！