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',
};

2. 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.js
import "./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对项目中的影响