投身烈火
Keep Walking

使用webpack 2 tree-shaking机制时需要注意的细节

之前听朋友在群里说在使用webpack打包的时候,tree-shaking并没有起作用,询问是否需要做相应的配置才能启动机制。因为之前仔细阅读过webpack的文档,写tree-shaking的部分并没有提及需要做什么特殊的设置,所以问题应该不是出在webpack的设置上。

那么问题是出在哪儿呢?webpack的文档上有这样一段说明:

1
webpack 2 comes with a built-in support for ES2015 modules (alias harmony modules) as well as unused module export detection.

大意是说,webpack 2 内部支持了es2015的模块机制。问题就出在这里,tree-shaking依赖于webpack的模块机制,而一般使用webpack时都会搭配babel使用,所以可能在webpack处理之前和babel就已经使用自己的模块机制处理完成了,所以才导致了tree-shaking没有成功。

当时他展示自己的babel配置是这样的:

1
2
3
4
5
6
\\...
loader: 'babel-loader',
options: {
presets: ['es2015', 'stage-0'],
}
\\...

测试之后发现,修改为:

1
2
3
4
5
6
7
8
9
\\...
loader: 'babel-loader',
options: {
presets: [
["es2015", { "modules": false }],
"stage-2"
],
}
\\...

就可以了……

另外,如果想要保持与最新的标准同步,最好使用 babel-preset-env。

另外另外,在调查资料的过程中,还发了一个使用typescript时会遇到的问题,也在这里记录一下。

由于使用typescript时,需要先将先将代码转换到es5,所以也没法使用tree-shaking的机制。解决方法是使用babel为webpack提供的babili-webpack-plugin插件来处理压缩代码。

好的由于时间不足,本期的博客就先写到这里,如果不出意外的话,maybe可能也许大概下周五会更新吧,能不能准时更新,就全看米娜桑点赞转发安利留言的热情了~!

白了个白~!