[譯]Webpack 2 Tree Shaking配置

原文

Tree Shaking是一個針對ES6以上代碼的清楚死代碼的算法，也是Webpack 2最被期待的特性之一。經過清除未使用的ES6引用，Webpack能更助於壓縮過程從而獲得比以前更小的文件體積。

Webpack 2簡單應用代碼已更新爲支持[Webpack2.2]，React (v15.4)以及Babel。

Tree shaking最終獲得的文件只會包含你引用的腳本。那些不被引用的則不會出如今最終文件中。

以下示例代碼，我將展現新的Webpack 2配置將一個已經優化過的Webpack1項目再減小28%的大小。

放棄CommonJS，擁抱原生Imports

Webpack2目前可以直接解析原生import，而不用轉換爲CommonJS模塊。這一點極其重要，若是你使用CommonJS暴露模塊會致使引用有效，這意味着你在export聲明中的一切都會被包含於最終的構建文件中。

爲了壓縮體積，你須要微調一下.babelrc配置。你須要使用babel-preset-es2015-native-modules來替代先前的es2015。這個配置控制在Babel編譯的過程當中跳過CommonJS模塊轉換的步驟。

使用npm安裝：

npm i babel-preset-es2015-native-modules --save-dev

新的.babelrc文件：

{
  「presets」: [「es2015-native-modules」]
}

若是你使用了React：

{
  「presets」: [「es2015-native-modules」, 「react」]
}

如今你搞定了Babel配置。本質上，你已經完成了Webpack2中tree shaking的全部工做。

因此如今讓咱們談談Webpack2的一些重要更新，以便幫到那些想從Webpack1遷移到Webpack2的人。

Webpack1遷移到Webpack2

Tree shaking是Webpack2開箱即用的功能。若是你如今有一個項目，是時候改進一些舊的配置。也許，你維護的多是一個使用Webpack1的子項目。讓咱們來回顧一些在你更新配置時須要注意的突破性的變化。

1.Loader配置

在你定義loader配置時有一些小改變。以前的類GET語法被換成了JSON形式的聲明。

讓咱們看看一個Webpack 1.x的例子：

loaders: [{
  test: /\.html$/,
  loader: 'file?name=[name].[ext]'
}]

一樣的配置在Webpack 2.x會變成這樣

loaders: [{
  test: /\.html$/,
  loader: 'file',
  query: {
    name: '[name].[ext]'
  }
}]

注意如今配置項以鍵值對的形式存在query參數重（譯註：如今更提倡使用options）

2.Resolver

Webpack 2中,resolve.root，resolve.fallback， resolve.modulesDirectories這些選項被整合進resolve.modules。如下就是在Webpack 2中解析文件與模塊地址的例子：

resolve: {
  modules: [
     path.resolve('./client'), 
     'node_modules'
  ]
}

你能夠指定一些列modules名單，但別忘了node_modules與npm dependencies是沒法加載的。

3.Uglify插件的變化

UglifyJsPlugin再也不壓縮'loader'，不推薦使用這種調試選項。這一功能被移入另外一插件LoaderOptionsPlugin之中：

new webpack.LoaderOptionsPlugin({
  minimize: true,
  debug: false
}),

4.其餘變化

強烈推薦Tobias Koppers aka Sokra的webpack 2新功能

實例

能夠參考React + Redux + Webpack 2構建app示例，其中包含了將你項目變得更小的全部重要的配置。與一樣但使用Webpack1的示例，能較少28%的文件體積。