[Webpack 2] Tree shaking with Webpack 2
2016-06-22 04:15
741 查看
The less code you can send to the browser, the better. The concept of tree shaking basically says that if you’re not using some piece of code, then exclude it from the final bundle, even when that piece of code is exported from a module. Because ES6 modules are statically analyzable, Webpack can determine which of your dependencies are used and which are not. In this lesson, see how to take advantage of this awesome feature in Webpack 2.
One of the aspects of ES6 modules is that they're statically analyzable. This means tools like Webpack can predict exactly which exports are used and which are not.
Bable is transpiling our ES6 module exports into common JS exports. Because this is getting transpiled down to common JS, it's not statically analyzable like ES6 modules, and so, Webpack can't reliably treeshake this function, and our bundle will include it even though it's not in use.
We're going to use a different Bable preset, which excludes the transpilation of ES6 modules and leave that to Webpack.
install:
.babelrc: change 'es2015 to 'es2015-webpack'
So now if you have a function unused anywhere in the project, but still get exported from the file. Then webpack will mark it and when minify the file, this function will be remove from the source.
One of the aspects of ES6 modules is that they're statically analyzable. This means tools like Webpack can predict exactly which exports are used and which are not.
Bable is transpiling our ES6 module exports into common JS exports. Because this is getting transpiled down to common JS, it's not statically analyzable like ES6 modules, and so, Webpack can't reliably treeshake this function, and our bundle will include it even though it's not in use.
We're going to use a different Bable preset, which excludes the transpilation of ES6 modules and leave that to Webpack.
install:
npm install babel-preset-es2015-webpack --save-dev
.babelrc: change 'es2015 to 'es2015-webpack'
"presets": ["es2015-webpack", "stage-2"],
So now if you have a function unused anywhere in the project, but still get exported from the file. Then webpack will mark it and when minify the file, this function will be remove from the source.
相关文章推荐
- [Webpack 2] Validate your Webpack config with webpack-validator
- (二)webpack入门——webpack的使用
- (一)webpack入门——webpack的安装
- Grunt、gulp、webpack、不要听着高大上你就上,试试Codekit?
- webpack
- [Webpack 2] Intro to the Production Webpack Course
- [转]webpack 使用优化指南
- webpack 多entry 配置
- webpack打包压缩工具的使用方法
- webpack es6支持配置
- webPack 使用方便快捷
- webpack loader 列表
- webpack进阶构建项目(一)
- 实用的webpack 配置文件
- webpack学习笔记一(入门)
- 【webpack】使用webpack进行ES6开发
- Webpack傻瓜式指南(未完待续)
- Mac下webpack安装
- webpack系列译文(1)
- webpack入门(五)——webpack 故障处理