一些webpack配置優化手段

loader 設置include或者exclude

• 通常第三方包都是打包好的，無需再打包，特別是babel-loader、eslint-loader

{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [resolve('src'), resolve('test')]
}
複製代碼

url-loader

• 能夠將一些比較小的靜態文件進行encode，轉成base64內聯。

{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    // 小於10kb的會轉成base64
    limit: 10 * 1024
  }
}
複製代碼

image-webpack-loader

• 使用image-webpack-loader進行圖片壓縮，能夠和url-loader配合使用，先壓縮，而後小的轉base64

{
  test: /\.(jpe?g|png|gif|svg)$/,
  loader: 'image-webpack-loader',
  // 保證在其餘loader前進行處理
  enforce: 'pre',
}
複製代碼

externals

• 好比用到一些第三方庫，能夠不經過webpack打包獲取，並且經過掛載在windows上、amd、commonjs等獲取

• 在作一些組件庫的按需加載時也是須要用到的

externals: {
  'Vue': 'window.Vue',
  'Vuex': 'window.Vuex',
  // 或者是commonjs、amd
  'Vue': {
    commonjs: 'vue',
    amd: 'vue'
  }
 }
複製代碼

ModuleConcatenationPlugin

• webpack 3新增的特性，用於將做用域提高，經過減小閉包的數量，能加快js的運行速度和必定程度減小體積

• 會增長編譯時間和破壞熱更新，因此只在生成環境使用

• webpack4中引入mode概念，在生成環境中會自動開啓

plugins: [
  new webpack.optimize.ModuleConcatenationPlugin()
]
複製代碼

DefinePlugin

• DefinePlugin將用"production"替換到process.env.NODE_ENV：

• UglifyJS會移除掉全部if分支, 由於"production" !== 'production'永遠返回 false

plugins: [
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': '"production"'
  })
]
複製代碼

tree shaking

• 利用es module的靜態解析，移除無用依賴

• babelrc中配置modules: false，讓babel不要處理import、export，讓webpack進行處理

• webpack會在打包時標記無用代碼，最後交給壓縮工具進行移除

• 更詳細的解釋能夠看這裏

uglifyjs-webpack-plugin

• 支持parallel字段，能夠進行並行化構建，能夠顯着加速構建

plugins: [
  new UglifyJsPlugin({
    parallel: true
  })
]
複製代碼

CommonsChunkPlugin

• 用於提取一些公共代碼，通常是用於提取第三方庫，這個在上線部署時頗有必要，由於出現bug，通常都是業務代碼的問題，第三方庫相對比較穩定，這個時候第三方庫代碼不該該受到影響，CommonsChunkPlugin能夠減小熱更的代價

// 將第三方庫單獨打包成一個vender
new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks: function (module) {
    // any required modules inside node_modules are extracted to vendor
    return (
      module.resource &&
      /\.js$/.test(module.resource) &&
      module.resource.indexOf(
        path.join(__dirname, '../node_modules')
      ) === 0
    )
  }
})
複製代碼

• 可是單獨抽離vender是不夠的，若是業務代碼發生變化，仍是會致使vender的hash值發生變化，緩存的做用也隨着消失，解決這個問題須要再打一個包，通常命名manifest或者runtime

new webpack.optimize.CommonsChunkPlugin({
  name: 'runtime',
  // 無限大表明須要在全部的模塊中共享的代碼纔會打包進來，意味着沒有任何模塊打包進來，只有webpack的運行代碼
  minChunks: Infinity
})
複製代碼

• webpack4中已經移除，使用optimization.splitChunks和optimization.runtimeChunk代替

NamedModulesPlugin

• NamedModulesPlugin可讓webpack打包時的chunk id變得穩定，若是咱們手動添加一個依賴，會使得chunk id發生變化，這個插件作的就是讓id穩定下來

• webpack4中在開發模式中自動開啓（--mode development）

plugins: [
  new NamedModulesPlugin()
]
複製代碼

懶加載

• webpack2以上支持動態import()，webpack1使用require.ensure，返回一個promise

• webpack遇到import()，會單獨將其抽離成一個js文件，等到運行時纔去加載

• 通常用的可能是在單頁面中，像vue-router、react-router等都支持import()進行懶加載

async function doSomeThing () {
  const {default: moment} = await import('moment')
  console.log(moment())
}

setTimeout(() => {
  doSomeThing()
}, 1000)
複製代碼

緩存處理

• 通常狀況下是讓服務器添加相關的頭，好比Cache-Control或者Expires

• 也能夠利用h5的manifest緩存，能夠作離線緩存

• 能夠利用appcache-webpack-plugin，即便處於離線狀態也是能夠正常打開網頁的，不過慢慢被淘汰，取而代之的是PWA

plugins: [
  new AppCachePlugin({
    network: ['*'], // No network access allowed!
    output: 'cache.appcache'
  }),
]
複製代碼

// output
CACHE MANIFEST
# c5a4d08e79f57e7c0b18

/static/log26736681.png
/static/index.d156bde75c3265560b9b.js
/static/vendor.1fe523904e40ca0cfc76.js
/static/manifest.5969cefb99f458a69963.js
/static/index.5202b34274a8b8bad9c76962a800f30c.css
/static/../index.html

NETWORK:
*
複製代碼

happypack、Dll和其餘騷操做

• 能夠看這裏