位置: IT常识 - 正文

tree shaking(摇树优化)(摇树的英文是什么)

编辑：rootadmin

tree shaking(摇树优化) tree shaking(摇树优化)前言随着js的不断发展，性能优化成了主流的方向，但是如何性能优化又成了现在程序员的一大苦恼，而我作为一名前端小白，也就深陷其中，最近学习到了tree shaking，在这里分享一下一、tree shaking是什么？

推荐整理分享tree shaking(摇树优化)(摇树的英文是什么)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:摇树的英文是什么,摇晃树木,摇晃树木,摇树是啥意思是什么,树摇摇晃晃,摇晃树木,摇树是啥意思是什么,摇树的英文是什么,内容如对您有帮助，希望把文章链接给更多的朋友！

在前端的性能优化中，es6 推出了tree shaking机制，tree shaking就是当我们在项目中引入其他模块时，他会自动将我们用不到的代码，或者永远不会执行的代码摇掉，在Uglify阶段查出，不打包到bundle中。

只支持ES6 Module代码。在production 环境默认开启。

二、哪些情况下可以使用tree-shaking呢？

1.首先，要明确一点：Tree Shaking 只支持 ESM 的引入方式，不支持 Common JS 的引入方式。

ESM: export + importCommon JS: module.exports + require

提示：如果想要做到tree shaking，在引入模块时就应该避免将全部引入，应该引入局部才可以触发tree shaking机制

代码如下（示例）：

// Import everything (not tree-shaking)import lodash from 'lodash';// Import named export (can be tree-shaking)import { debounce } from 'lodash';// Import the item directly (can be tree-shaking)import debounce from 'lodash/lib/debounce';三、项目中如何配置tree-shaking？

1、开发环境配置tree shaking

// webpack.config.jsmodule.exports = { // ... mode: 'development', optimization: { usedExports: true, }};生产环境下的配置// webpack.config.js 生产环境下只需要把mode配置成‘production’即可module.exports = { // ... mode: 'production',};sideEffects: false 根据环境的不同进行配置以后，还需要在 package.json 中，添加字段：**sideEffects: false，**告诉 Webpack 哪些代码可以处理{ "name": "webpack-demo-1", "sideEffects": false, // ...}// 列子：// All files have side effects, and none can be tree-shaken{ "sideEffects": true}// No files have side effects, all can be tree-shaken{ "sideEffects": false}// Only these files have side effects, all other files can be tree-shaken, but these must be kept{ "sideEffects": [ "./src/file1.js", "./src/file2.js" ]}

这里引用了webpack文档中的配置，点击即可查看详情

五、sideEffects 对全局 CSS 的影响对于那些直接引入到 js 文件的文件，例如全局的 css，它们并不会被转换成一个 CSS 模块。/* reset.css */* { margin: 0; padding: 0; box-sizing: border-box;}html,body { background-color: #eaeaea;}// main.jsimport "./styles/reset.css"这样的代码，在打包后，打开页面，你就会发现样式并没有应用上，原因在于：上面我们将 sideEffects 设置为 false后，所有的文件都会被 Tree Shaking，通过 import 这样的形式引入的 CSS 就会被当作无用代码处理掉。为了解决这个问题，可以在 loader 的规则配置中，添加 sideEffects: true，告诉 Webpack 这些文件不要Tree Shaking。// webpack.config.jsmodule.exports = { // ... module: { rules: [ { test: /\.css$/i, use: ["style-loader", "css-loader"], sideEffects: true } ] },};总结tree shaking就是类似一棵树有长熟的苹果，将已经成熟的苹果摇掉减轻树的负担，这就实现了这个机制在es6中的import和export才可以触发这个机制项目中对tree-shaking的配置tree-shaking对项目中的影响