在多個檔案中import同一個檔案，webpack會多次打包嗎

Zegendary發表於2017-12-13
ImportWeb

最近自己在練習寫React,Vue的時候，會在不同的子元件中多次import同一個檔案，例如：import React from 'react'、import Vue from 'vue'，引入的次數多了慢慢讓我產生了疑惑，引入這麼多次，webpack會多次打包嗎？直覺告訴我webpack並不傻，不會愚蠢的打包多次使打包後的檔案異常臃腫，如果不會的話為什麼不會呢？懷著好奇心在谷歌搜尋很久也沒有找到讓我信服的的答案，於是我自己做了個實驗（原始碼），來證明自己的猜想：

1.模擬react/vue環境

第一步是安裝相關webpack、babel等相關依賴以及建好目錄 webpack設定：

//webpack.config.js
module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders:[
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: 'babel-loader?presets[]=es2015&presets[]=react'
      },
    ]
  }
}
複製程式碼

package.json所需依賴：

//package.json
{
  "name": "test",
  "version": "0.0.1",
  "devDependencies": {
    "webpack": "^1.14.0"
  },
  "dependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0"
  }
}
複製程式碼

其他用於測試的檔案：

//demo.js--相當於vue
export default {
  test(argu) {
    console.log(argu)
  }
}

//test1.js --相當於某個元件

import demo from './demo'

export default {
  test1() {
    demo.test(1)
  }
}

//test2.js --相當於另一個元件
import demo from './demo'

export default {
  test1() {
    demo.test(2)
  }
}

//add.js --入口檔案

import Test1 from './test1'
import Test2 from './test2'

Test1.test1()
Test2.test2()
複製程式碼

我在test1.js,test2.js中都引入demo.js,並且exoprt 出依賴demo.js的方法，然後再在app.js中引入test1.js,test2.js webpack打包後開啟bundle.js，找到demo部分。

demo部分
我們發現在bundle.js中引入的檔案都被分成了帶有序號(num)的“程式碼片”，通過__webpack_require__(num)來引入對應的模組，而我們import兩次用來測試的demo.js也只是被打包成了序號為2的程式碼塊，由此我們可以推論出：

不同檔案中多次import同一個檔案，webpack並不會多次打包，只會在打包後的檔案中會多次引用打包後的該檔案對應的函式。

問題終於搞清楚了，很舒服！！?

相關文章