[Webpack 2] Tree shaking with Webpack 2
webpack with Tree
2023-09-14 09:00:53 时间
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:
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开发小总结
- [Webpack] Analyze a Production JavaScript Bundle with webpack-bundle-analyzer
- [Webpack] Create Separate webpack Configs for Development and Production with webpack-merge
- [WASM] Create a New Rust/Webpack Project using the rust-webpack Template
- [Webpack 2] Hashing with Webpack for long term caching
- [Webpack 2] Maintain sane file sizes with webpack code splitting
- [AngualrJS + Webpack] Production Source Maps
- [AngularJS + Webpack] ES6 with BabelJS
- [AngularJS + Webpack] require directives
- webpack中引入的path[require('path')]是node.js内置的package,用来处理路径的。
- Webpack 4 SplitChunksPlugin配置方案
- Node + Express + vue2.0 + Webpack项目实践
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端源码重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui
- 实现一个简易版webpack
- vue-cli内部webpack的打包优化
- webpack打包提取css到独立文件
- [Webpack] Externalize Dependencies to be Loaded via CDN with webpack
- [Webpack 2] Grouping vendor files with the Webpack CommonsChunkPlugin
- vue3.x:用webpack-bundle-analyzer分析chunk文件过大的原因(vue.js 3.0.5/@vue/cli 4.5.13)
- Webpack学习指南 - [3] 小试Webpack
- 单步调试理解webpack里通过require加载nodejs原生模块实现原理
- 单步调试理解webpack里通过require加载nodejs原生模块实现原理
- webpack安装和配置
- vite 为什么比 webpack 快?