jjzjj

tree shaking(摇树优化)

还一激灵 2023-04-12 原文

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.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对项目中的影响
shakingtreespanclasstokenwebpack前端javascript

有关tree shaking(摇树优化)的更多相关文章

  1. Ruby 缺少常量表达式优化？ - 2

    我希望Ruby的解析器会进行这种微不足道的优化，但似乎并没有(谈到YARV实现，Ruby1.9.x、2.0.0):require'benchmark'deffib1a,b=0,1whileb由于这两种方法除了在第二种方法中使用预定义常量而不是常量表达式外是相同的，因此Ruby解释器似乎在每个循环中一次又一次地计算幂常数。是否有一些Material说明为什么Ruby根本不进行这种基本优化或只在某些特定情况下进行？ 最佳答案 很抱歉给出了另一个答案，但我不想删除或编辑我之前的答案，因为它下面有有趣的讨论。正如JörgWMittag所说，

  2. ruby-on-rails - 优化读取数据库和写入csv文件 - 2

    我正在尝试从数据库中读取大量单元格(超过100.000个)并将它们写入VPSUbuntu服务器上的csv文件。碰巧服务器没有足够的内存。我正在考虑一次读取5000行并将它们写入文件，然后再读取5000行，等等。我应该如何重构我当前的代码以使内存不会被完全消耗？这是我的代码:defwrite_rows(emails)File.open(file_path,"w+")do|f|f该函数由sidekiqworker调用:write_rows(user.emails)感谢您的帮助! 最佳答案 这里的问题是，当您调用emails.each时，

  3. 软约束、硬约束、Minimum Snap的轨迹优化方法 - 2

    文章目录前言约束硬约束的轨迹优化Corridor-BasedTrajectoryOptimizationBezierCurveOptimizationOtherOptions软约束的轨迹优化Distance-BasedTrajectoryOptimization优化方法前言可以看看我的这几篇Blog1，Blog2，Blog3。上次基于MinimumSnap的轨迹生成，有许多优点，比如：轨迹让机器人可以在某个时间点抵达某个航点。任何一个时刻，都能数学上求出期望的机器人的位置、速度、加速度、导数。MinimumSnap可以把问题转换为凸优化问题。缺点：MnimumSnap可以控制轨迹一定经过中间的

  4. ruby-on-rails - 负载测试期间 Unicorn CPU 使用率激增，优化方法 - 2

    我对为我的RubyonRails3.1.3应用优化我的Unicorn设置的方法很感兴趣。我目前正在高CPU超大实例上生成14个工作进程，因为我的应用程序在负载测试期间似乎受CPU限制。在模拟负载测试中，每秒大约20个请求重放请求，我的实例上的所有8个内核都达到峰值，盒子负载飙升至7-8个。每个unicorn实例使用大约56-60%的CPU。我很好奇可以通过哪些方式对其进行优化？我希望能够每秒将更多请求汇集到这种大小的实例上。内存和所有其他I/O一样完全正常。在我的测试过程中，CPU越来越低。 最佳答案 如果您受CPU限制，您希望使用

  5. 美团外卖搜索基于Elasticsearch的优化实践 - 2

    美团外卖搜索工程团队在Elasticsearch的优化实践中，基于Location-BasedService（LBS）业务场景对Elasticsearch的查询性能进行优化。该优化基于Run-LengthEncoding（RLE）设计了一款高效的倒排索引结构，使检索耗时（TP99）降低了84%。本文从问题分析、技术选型、优化方案等方面进行阐述，并给出最终灰度验证的结论。1.前言最近十年，Elasticsearch已经成为了最受欢迎的开源检索引擎，其作为离线数仓、近线检索、B端检索的经典基建，已沉淀了大量的实践案例及优化总结。然而在高并发、高可用、大数据量的C端场景，目前可参考的资料并不多。因此

  6. 基于RTS超低延时直播优化强互动场景体验 - 2

    RTS在阿里云视频直播的基础上进行底层技术优化，通过集成阿里云播放器SDK，支持在千万级并发场景下节点间毫秒级延时直播的能力，弥补了传统直播存在3~6秒延时的问题，确保了超低延时、低卡顿、秒开流畅的直播观看体验。本文介绍了基于RTS超低延迟直播优化强互动场景体验的最佳实践方案，并以阿里云播放器Aliplayer为例，详细介绍RTS超低延迟拉流接入、自动降级、排障信息获取等逻辑的实现，助力企业打造互动直播行业的产品竞争力。适用场景该方案适用于对超低延迟直播有诉求的客户，尤其是业务中存在强互动场景直播的场景。强互动场景直播主要是指对主播和观众存在互动，或观众存在更高实时性观看、画面互动需求的情况，

  7. ruby - 无法使用 CONSTANT 优化字符串 - 2

    我目前正在研究Ruby2.1.1的改进，但遇到了一些奇怪的事情。我正在尝试改进String类并定义一个名为FOO的常量。沙箱.rbmoduleFoobarrefineStringdoFOO="BAR"deffoobar"foobar"endendendusingFoobarputs"".class::FOO#=>uninitializedconstantString::FOO(NameError)puts"".foobar#=>"foobar"这给了我未初始化的常量String::FOO(NameError)。但是我可以调用"".foobar这让我相信我在正确的范围内。奇怪的是，如果我

  8. ruby - 如何优化 ActiveRecord find_in_batches 查询？ - 2

    我正在使用Rails4.0.0和Ruby2.0.0。我的Post(如在博客文章中)模型与用户相关联，该用户具有用户的user_name、first_name、last_name的组合。我想迁移数据，以便通过外键(即用户ID)将帖子关联到用户。我在posts表中有大约1100万条记录。我在Linux服务器上使用rake任务运行以下代码来迁移数据。然而，我的任务一直被服务器“杀死”，大概是由于rake任务，特别是下面的代码，消耗了太多内存。我发现将batch_size降低到20并将sleep(10)增加到sleep(60)允许任务运行更长的时间，在不被杀死的情况下总共更新更多的记录，但需要

  9. ruby - 为什么 `send` 会因 Ruby 2.0 优化而失败？ - 2

    为什么这不起作用？moduleStringRefinementrefineStringdodefbarlengthendendendusingStringRefinement"abcdefghijklmnopqrstuvwxyz".send(:bar)#NoMethodError:undefinedmethod'bar'for"abcdefghijklmnopqrstuvwxyz":String有人可以解释为什么send在这里不起作用吗？有没有办法动态调用定义在细化中的方法？我似乎找不到关于Ruby2.0中的改进工作原理的完整解释。 最佳答案

  10. 优化大数据量查询方案——SpringBoot（Cloud）整合ES - 2

    一、Elasticsearch简介实际业务场景中，多端的查询功能都有很大的优化空间。常见的处理方式有：建索引、建物化视图简化查询逻辑、DB层之上建立缓存、分页…然而随着业务数据量的不断增多，总有那么一张表或一个业务，是无法通过常规的处理方式来缩短查询时间的。在查询功能优化上，作为开发人员应该站在公司的角度，本着优化客户体验的目的去寻找解决方案。本人有幸做过Tomcat整合solr，今天一起研究一下当前比较火热的Elasticsearch搜索引擎。Elasticsearch是一个非常强大的搜索引擎。它目前被广泛地使用于各个IT公司。Elasticsearch是由Elastic公司创建。它的代码位

随机推荐