webpack打包文件太大怎么解決

這篇文章主要講解了“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。

這樣子，我們就可以把文件的緩存設置得很長，而不用擔心更新問題。

感謝各位的閱讀，以上就是“webpack打包文件太大怎么解決”的內容了，經過本文的學習后，相信大家對webpack打包文件太大怎么解決這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！