面试：webpack的tree-shaking

已于 2023-07-14 13:54:39 修改
阅读量372 收藏
点赞数 1
分类专栏： webpack 文章标签： webpack 前端 javascript
于 2023-05-29 15:38:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43592064/article/details/130929564
版权

摇树js

Tree-shaking的本质是消除没有用到的代码。主要的效果是，引用了但没有使用的模块，不会被打包到最终的bundle中。

Tree-shaking要求模块是ESM,ES6模块依赖关系是确定的，和运行时的状态无关，可以进行可靠的静态分析，这就是tree-shaking的基础。

所谓静态分析就是不运行代码，从语法上对代码进行分析，ES6之前的模块化，比如我们可以动态require一个模块，只有执行后才知道是否要引用某个模块，引用的是什么模块，这个就不能通过静态分析去做优化。

webpack默认支持Tree-shaking，如果mode为"production"webpack在构建会做Tree-shaking的操作。

摇树css

摇树css的基本思路是，给定content和css，分析content中用到的选择器，然后分析css文件中没有用到的选择器，将其移除。

摇树css工具有：

1、PurifyCSS

使用purgecss-webpack-plugin

2、uncss

啃火龙果的兔子
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Webpack之Tree Shaking
油墨香^-^的博客
05-09 91
综上所述，Webpack 中 Tree Shaking 的实现分为如下步骤：在插件中根据模块的列表收集模块导出值，并记录到 ModuleGraph 体系的中在插件中收集模块的导出值的使用情况，并记录到集合中在方法中根据导出值的使用情况生成不同的导出语句使用 DCE 工具删除 Dead Code，实现完整的树摇效果。
Webpack中的tree-shaking
laplacepoisson的博客
05-19 5487
文章目录Webpack中的tree-shaking简单实践副作用sideEffectssideEffects配置项false数组结论 Webpack中的tree-shaking tree-shaking就是把js文件中无用的模块或者代码删掉。而这通常需要借助一些工具。在webpack中tree-shaking就是在打包时移除掉javascript上下文中无用的代码，，从而优化打包的结果。 在webpack5中已经自带tree-shaking功能，在打包模式为production时，默认开启 tree-sha
webpack tree-shaking
weixin_45002586的博客
11-14 650
webpack tree-shaking
webpack5中的 tree-shaking
weixin_38992765的博客
05-25 1505
tree-shaking 简介 通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export。这个术语和概念实际上是兴起于 ES2015 模块打包工具 rollup。 配置 前置 在这之前我们安装下，分析插件，可以更好配合我们看到效果 执行 npm install webpack-bundle-analyzer 打开 webpack.config.js ， 配置 webpack-bundl
Webpack Tree Shaking
乌龙茶不甜的博客
03-20 1256
Tree Shaking tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块语法的 静态结构 特性，例如 import 和 export。这个术语和概念实际上是由 ES2015 模块打包工具 rollup 普及起来的。 webpack 2 正式版本内置支持 ES2015 模块（也叫做 harmony modules）和未使用模块检测能力。新的 webpack 4 正式版本扩展了此检测能力，通过 package
babel-webpack-tree-shaking：Babel和Webpack的树状摇动示例
01-30
对于生产构建，请运行npm run webpack-prod （ES2015-> ES5捆绑包-> UglifyJS）。 使用Babel转换类时，它会生成一个IIFE并分配给原型。 UglifyJS将其视为副作用，并且将其删除。 请参阅以下问题： 和 Webpack + ...
web-webpack-plugin：替代html-webpack-plugin
02-03
web-webpack-plugin 想全面学习Webpack？试试它： 不错替代品，可以使webpack将HTML用作条目并处理多页。 安装 npm i web-webpack-plugin --save-dev const { WebPlugin , AutoWebPlugin } = require ( 'web-...
typescript-webpack-tree-shaking：使用Typescript和Webpack进行树状摇动的示例
02-06
使用Typescript和Webpack的摇树示例 该存储库显示了如何配置Typescript和Webpack来启用摇树。 如果它们具有ES2015模块格式，它将消除死代码。 可以在app/文件夹中找到源代码，在该目录中，主文件car.js并未使用...
webpack-test:webpack-test
07-14
#Webpack 测试网络包测试
webpack-tree-shaking-exports
05-25
webpack-tree-shaking-exports 这只是表明webpack能够摇摇进口商品的出口。 挺整洁的。 您可以只在这里查看bundle.js和bundle.prod.js文件，也可以自己克隆和构建它，以便随意处理。 以下是一些详细信息： index....
提速利器：Tree Shaking助力你的应用程序
你若盛开，清风自来
10-31 418
Tree Shaking（摇树优化）是一种在打包（bundle）过程中，用于减小 JavaScript 文件大小的优化技术。它基于静态代码分析的原理，通过识别和移除应用程序中未使用的代码块，从而减少最终生成的文件体积。传统的打包工具在将所有模块打包到一个文件中时，往往会包含许多未使用的代码，包括函数、类、变量等。这些未使用的代码会增加文件的大小，导致更长的加载时间和带宽消耗。而Tree Shaking技术则通过静态分析代码的引用关系，可静态地确定哪些代码被使用，哪些代码没有被使用。
webpack的Tree Shaking原来要这么使用才有效
qq_41831345的博客
02-16 2427
先来了解一下commonJS和ES6模块导入导出使用方法。 commonJS utils/index.js exports.bar = 2 module.exports = {foo: 9} exports.foo = 1; index.js中引入： const a = require('./utils/index') console.log(a) // {foo: 9} utils/index.js exports.bar = 2 exports.foo = 1; index.js
webpack 如何优雅的使用tree-shaking（摇树优化）
热门推荐
小辣抓
08-15 3万+
webpack 如何优雅的使用tree-shaking1.什么是tree-shakingwebpack 2 的到来带来的最棒的新特性之一就是tree-shaking 。tree-shaking源自于rollup.js，先如今，webpack 2也有类似的做法。webpack 里的tree-shaking的到来不得不归功于es6规范的模块。为什么这么说，如今的前端模块规范很多，比较出流行的比如comm
Webpack 之 treeShaking
前端大全
08-21 4513
（点击上方公众号，可快速关注）来源：easonyq github.com/easonyq/easonyq.github.io/blob/master/学习记录/webpa...
webpack 中 tree shaking得使用
业余前端的职业经历
08-25 700
看过 尤大神 直播关于讲解 vue3.0得特性的同学 肯定也看到了 tree shking 这个特性了 先来讲解下 什么是 tree shking 先拿生活上的例子来说 字面意思是 摇晃树枝 因为树上可能有很多死的页面 在树枝上 我们可以通过摇晃 树 来吧树上的一些 死得树叶 给摇晃下来 占个地方 却没啥用 这个意思 带到我们的代码中 就是 一些 我们定义得代码 却从来没有用到的死代码 就不要打包到 最后的文件中 这个是 tree shaking 在webpack中得意思 不过要满足
webpack 使用外部的库_吊打面试官系列之Webpack的Tree Shaking实战解密
weixin_30428981的博客
12-30 611
天下武功，唯快不破！最新版的 antd 以及 vue 都对 Tree Shaking 提供了支持。我们内部的组件在支持这部分功能时，也专门梳理了相关的特性。这是四月份写的文章了，长时间不用就会忘，复习一下！JS 文件绝大多数需要通过网络进行加载，然后执行。DCE(dead code elimination)可以使得加载文件的大小更小，整体执行时间更短。tree shaking就是通常用...
webpack构建中tree shaking、scope Hoisting（面试题）
情非得已小猿猿
09-16 819
一、tree shaking （摇树优化） tree shaking概念： 1个模块可能有多个方法，只要其中某个方法使用了，整个文件会被打到bundle中 tree shaking 只将用到的方法打到bundle中，没用的在uglify阶段被擦除 webpack默认支持，在.babelrc文件中设置 modules: false即可 production mode 下默认开启 tree shaking 必须是ES6语法 tree shaking原理：依赖于ES6 moudel特性 只能作为模块
Vite和Webpack的区别是什么，你站队谁？
最新发布
贝格前端工场的博客
06-13 377
Vite和Webpack有很多相同之处，也有区别，很多老铁分不清，贝格前端工场借助此文为大家详细介绍一下。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值