好程式設計師教程分享webpack 打包檔案太大怎麼辦

好程式設計師 教程分享 webpack 打包檔案太大怎麼辦 ， webpack 把我們所有的檔案都打包成一個 JS 檔案，這樣即使你是小專案，打包後的檔案也會非常大。下面就來講下如何從多個方面進行最佳化。

 

去除不必要的外掛

 

剛開始用 webpack 的時候，開發環境和生產環境用的是同一個 webpack 配置檔案，導致生產環境打包的 JS 檔案包含了一大堆沒必要的外掛，比如

<font size="3" color="#000000">HotModuleReplacementPlugin, NoErrorsPlugin</font>

複製程式碼

這時候不管用什麼最佳化方式，都沒多大效果。所以，如果你打包後的檔案非常大的話，先檢查下是不是包含了這些外掛。

 

 

提取第三方庫

 

像 react 這個庫的核心程式碼就有 627 KB ，這樣和我們的原始碼放在一起打包，體積肯定會很大。所以可以在 webpack 中設定

<font size="3" color="#000000">{

  entry: {

   bundle: 'app'

    vendor: ['react']

  }

 

  plugins: {

    new webpack.optimize.CommonsChunkPlugin('vendor',  'vendor.js')

  }

}</font>

 

這樣打包之後就會多出一個 vendor.js 檔案，之後在引入我們自己的程式碼之前，都要先引入這個檔案。比如在 index.html 中

<font size="3" color="#000000"><script src="/build/vendor.js"></script></font>

 

除了這種方式之外，還可以透過引用外部檔案的方式引入第三方庫，比如像下面的配置

<font size="3" color="#000000">{

  externals: {

     'react': 'React'

  }

}</font>

 

externals 物件的 key 是給 require 時用的，比如 require('react') ，物件的 value 表示的是如何在 global 中訪問到該物件，這裡是 window.React 。這時候 index.html 就變成下面這樣

<font size="3" color="#000000"><script src="//cdn.bootcss.com/react/0.14.7/react.min.js"></script>

<script src="/build/bundle.js"></script></font>

 

當然，個人更推薦第一種方式。

 

目前推薦用 DLL 的方式提取第三方庫。

 

 

程式碼壓縮

 

webpack 自帶了一個壓縮外掛 UglifyJsPlugin ，只需要在配置檔案中引入即可。

<font size="3" color="#000000">{

  plugins: [

    new webpack.optimize.UglifyJsPlugin({

      compress: {

        warnings: false

      }

    })

  ]

}</font>

 

加入了這個外掛之後，編譯的速度會明顯變慢，所以一般只在生產環境啟用。

 

另外，伺服器端還可以開啟 gzip 壓縮，最佳化的效果更明顯。

 

 

程式碼分割

 

什麼是程式碼分割呢？我們知道，一般載入一個網頁都會把全部的 js 程式碼都載入下來。但是對於 web app 來說，我們更想要的是隻載入當前 UI 的程式碼，沒有點選的部分不載入。

 

看起來好像挺麻煩，但是透過 webpack 的 code split 以及配合 react router 就可以方便實現。具體的例子可以看下 react router 的官方示例 huge apps 。不過這裡還是講下之前配置踩過的坑。

 

code split 是不支援 ES6 的模組系統的，所以在匯入和匯出的時候千萬要注意，特別是匯出。如果你匯出元件的時候用 ES6 的方式，這時候不管匯入是用 CommomJs 還是 AMD ，都會失敗，而且還不會報錯！

 

當然會踩到這個坑也是因為我剛剛才用 NodeJS ，而且一入門就是用 ES6 的風格。除了這個之外，還有一點也要注意，在生產環境的 webpack 配置檔案中，要加上 publicPath

 

<font size="3" color="#000000">output: {

    path: xxx,

    publicPath: yyy,

    filename: 'bundle.js'

}</font>

 

不然的話， webpack 在載入 chunk 的時候，路徑會出錯。

 

 

設定快取

 

對於靜態檔案，第一次獲取之後，檔案內容沒改變的話，瀏覽器直接讀取快取檔案即可。那如果快取設定過長，檔案要更新怎麼辦呢？嗯，以檔案內容的 MD5 作為檔名就是一個不錯的解決方案。來看下用 webpack 應該怎樣實現

 

<font size="3" color="#000000">output: {

    path: xxx,

    publicPath: yyy,

    filename: '[name]-[chunkhash:6].js'

}</font>

 

打包後的檔名加入了 hash 值

<font size="3" color="#000000">const bundler = webpack(config)

 

bundler.run((err, stats) => {

  let assets = stats.toJson().assets

  let name

 

  for (let i = 0; i < assets.length; i++) {

    if (assets[i].name.startsWith('main')) {

      name = assets[i].name

      break

    }

  }

 

  fs.stat(config.buildTemplatePath, (err, stats) => {

    if (err) {

      fs.mkdirSync(config.buildTemplatePath)

    }

 

    writeTemplate(name)

  })

})</font>

 

手動呼叫 webpack 的 API ，獲取打包後的檔名，透過 writeTemplate 更新 html 程式碼。完整程式碼猛戳 gitst 。

 

這樣子，我們就可以把檔案的快取設定得很長，而不用擔心更新問題。