0


tree shaking(摇树优化)

tree shaking(摇树优化)


前言

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

一、tree shaking是什么?

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

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

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

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

  • ESM: export + import
  • Common 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.js
module.exports ={// ...
  mode:'development',
  optimization:{
    usedExports: true,}};
  1. 生产环境下的配置
// webpack.config.js   生产环境下只需要把mode配置成‘production’即可
module.exports ={// ...
  mode:'production',};
  1. 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.js
module.exports ={// ...module:{rules:[{test:/\.css$/i,use:["style-loader","css-loader"],sideEffects:true}]},};

总结

  1. tree shaking就是类似一棵树有长熟的苹果,将已经成熟的苹果摇掉减轻树的负担,这就实现了这个机制
  2. 在es6中的import和export才可以触发这个机制
  3. 项目中对tree-shaking的配置
  4. tree-shaking对项目中的影响

本文转载自: https://blog.csdn.net/m0_50074446/article/details/125211941
版权归原作者 还一激灵 所有, 如有侵权,请联系我们删除。

“tree shaking(摇树优化)”的评论:

还没有评论