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

生产环境下的配置

// 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.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}]},
};

总结

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

tree shaking(摇树优化)相关推荐

Angular 应用里的摇树优化 - tree shaking
Tree Shakeable Providers and Services in Angular Angular 最近推出了一项新功能,Tree Shakeable Providers. Tree S ...
手写小程序摇树优化工具（三）——遍历json文件
见素包朴,少私寡欲,绝学无忧 github: miniapp-shaking 上一章我们介绍了遍历js文件的方法,接下来我们介绍其他文件的遍历. 1. 遍历JSON文件对于json文件,我们直接读取 ...
webpack 如何优雅的使用tree-shaking（摇树优化）
webpack 如何优雅的使用tree-shaking 1.什么是tree-shaking webpack 2 的到来带来的最棒的新特性之一就是tree-shaking .tree-shaking源自 ...
webpack构建中tree shaking、scope Hoisting（面试题）
一.tree shaking (摇树优化) tree shaking概念: 1个模块可能有多个方法,只要其中某个方法使用了,整个文件会被打到bundle中 tree shaking 只将用到的方法打到 ...
dce和tree shaking
dce和tree shaking 为了在弱网环境下降低网络延迟以获取更好的用户体验,我想这些关于如何降低代码体积的技术都是值得研究的.目前降低网络延迟的一个方法是降低js代码的体积,本文研究的就是在压 ...
webpack中的tree shaking(树摇)-----移除未使用的代码
本篇大致概括一下tree shaking的作用以及与webpack相结合使用什么是tree shaking 引用webpack官网的原文来说: tree shaking 是一个术语,通常用于描述移除 ...
tree shaking 及其工作原理
写在前面今天这道题目是在和小红书的一位面试官聊的时候: 我:如果要你选择一道题目来考察面试者,你最有可能选择哪一道? 面试官:那应该就是介绍一下tree shaking及其工作原理? 我:为什么? ...
前端基础建设与架构11 Tree Shaking：移除 JavaScript 上下文中的未引用代码
时至今日,Tree Shaking 对于前端工程师来说,已经不是一个陌生的名词了.顾名思义:Tree Shaking 译为"摇树",它通常用于描述移除 JavaScript 上下文 ...
无用代码去哪了？项目减重之 rollup 的 Tree shaking
左琳,微医前端技术部前端开发工程师.身处互联网浪潮之中,热爱生活与技术. Tip:本文所用 rollup 打包工具版本为 rollup v2.47.0. 从 Webpack2.x 通过插件逐步实现 t ...

tree shaking(摇树优化)

tree shaking(摇树优化)

前言

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

一、tree shaking是什么？

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

三、项目中如何配置tree-shaking？

五、sideEffects 对全局 CSS 的影响

总结

tree shaking(摇树优化)相关推荐

最新文章

热门文章