原文
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%的文件体积。