浅谈 ES 模块和 Webpack Tree-shaking

最新推荐文章于 2024-06-08 19:58:46 发布
最新推荐文章于 2024-06-08 19:58:46 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： 前端 程序员 互联网 IT 编程 文章标签： 程序员 编程 前端 互联网 IT
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tzllxya/article/details/90676199
版权
本文探讨了Tree-shaking在前端优化中的重要性，解释了Tree-shaking与DCE的区别，并通过示例展示了Webpack如何进行Tree-shaking。文章指出，尽管Webpack 2以后支持Tree-shaking，但在某些情况下，其能力有限。为了解决这个问题，作者提供了一个作用域分析插件，用于进一步优化未使用的变量。文章强调，良好的模块设计和合理使用default与named export才是减少代码体积的关键。
摘要由CSDN通过智能技术生成

浅谈 ES 模块和 Webpack Tree-shaking

 

这是我在参加 GSoC(Google Summer of Code) 2018 里的项目：为 webpack 改进 tree-shaking。本人是 19 届应届生，目前在今日头条效率工程部（深圳研发）实习。

Tree-shaking ? 是前端比较重要的技术之一，因为减少代码包的体积意味着减少每一次网络传输的耗时，对用户体验有比较大的提升。对于一个包管理工具来说，DCE 是必不可少的 feature 之一了。

Tree-shaking 最早由打包工具 Rollup 提出，而作者也在一篇 Medium 文章解释了 Tree-shaking 和 DCE 的区别：

Rather than  excluding dead code, we’re  including live code.

Webpack 的 maintainer 之一 Tobias ?也跟我解释了他的看法，DCE 作用于模块内（webpack 的 DCE 通过 UglifyJS 完成），而 Tree-shaking 则是在打包的时候通过模块之间的信息打包必须的代码。

Webpack 与 Tree-sh

最低0.47元/天 解锁文章
程序员一木
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack 4 笔记六 关于tree shaking
qq_34487996的博客
04-03 271
tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code) 如果将应用程序比作一棵树。 绿色表示实际用到的源码和 library，是树上活的树叶。 灰色则表示无用的代码(dead-code)，是秋天树上枯萎的树叶。 为了除去死去的树叶，你必须摇动这棵树，使它们落下。 tree shaking 的原理可以参考Tree-Shaking性...
Webpack 原理系列九：Tree-Shaking 实现原理
奇舞周刊
09-02 1739
一、什么是 Tree ShakingTree-Shaking 是一种基于 ES Module 规范的 Dead Code Elimination 技术，它会在运行过程中静态分析模块之间的导...
Tree Shaking浅谈
goodloving的博客
05-04 376
现在所提到的Tree Shaking都是在**ES Module**标准只上的：静态编译，确定输入输出值； Tree Shaking主要流程可以简化为：搜集依赖—>标记引用—>清除DeadCode。
Webpack Tree Shaking原理与实践
最新发布
天涯学馆
06-08 887
Webpack 的 Tree Shaking 是一种优化技术，用于删除未使用的代码，特别是在 ES6 模块系统中。Webpack 通过静态分析模块的导入和导出来识别和移除那些没有被引用的代码。
Tree Shaking概念和原理以及es6 module和commonjs的区别
祥哥的说
10-27 3544
Tree Shaking只支持ES模块的使用，不支持require这种动态引入模块的方式。 前端中的tree-shaking可以理解为通过工具"摇"我们的JS文件，将其中用不到的代码"摇"掉，是一个性能优化的范畴。具体来说，在 webpack 项目中，有一个入口文件，相当于一棵树的主干，入口文件有很多依赖的模块，相当于树枝。实际情况中，虽然依赖了某个模块，但其实只使用其中的某些功能。通过 tre...
[前端面试] CommonJs与ES Module的区别、Tree Shaking
iChangebaobao的博客
04-15 963
ES6 module 特点：只能作为模块顶层的语句出现import 的模块名只能是字符串常量import binding 是 immutable的ES6模块依赖关系是确定的，和运行时的状态无关，可以进行可靠的静态分析，这就是tree-shaking的基础。下面引入的style.css模块，如果也使用Tree shaking，由于css文件没有导出任何模块，那么就有可能在打包的时候该引入模块就被摇晃掉了，导致bug。CommonJs 导出值是拷贝，可以修改导出的值，这在代码出错时，不好排查引起变量污染。
harmonyos2-webpack-tree-shaking:webpack2tree-shaking编译研究
07-01
tree-shaking，但由于现有的 production 环境，不得不使用 babel 语法转换器，在配置 .babelrc 时，跟 webpack 1 还是有所差别。 此项目只是对 webpack tree-shaking 技术的验证实验。 介于webpack2正式发布，官方也...
babel-webpack-tree-shaking：Babel和Webpack的树状摇动示例
01-30
Babel和Webpack的摇树示例 该存储库显示了如何配置Babel和Webpack来启用摇树。 如果它们具有ES2015模块格式，它将消除死代码。 可以在app/文件夹中找到源代码，在该目录中，主文件car.js并未使用engine.js所有依赖...
typescript-webpack-tree-shaking：使用Typescript和Webpack进行树状摇动的示例
02-06
如果它们具有ES2015模块格式，它将消除死代码。 可以在app/文件夹中找到源代码，在该目录中，主文件car.js并未使用engine.js所有依赖项。 可以在/dist文件夹中找到生成和编译的文件。 Webpack仅在捆绑时标记未...
浅谈Webpack4 Tree Shaking 终极优化指南
10-15
Webpack 4中tree shaking的优化是一个系统工程，需要开发者对整个项目的构建过程和模块依赖有清晰的认识，才能够正确配置并获得最佳的优化效果。本文通过详细介绍Webpack 4 Tree Shaking的实现机制和优化策略，为...
webpack-develop.zip
11-01
10. **生产环境优化**：在构建生产版本时，Vue CLI 3会自动应用各种优化策略，如代码压缩、去除console语句、Tree Shaking等，以提高应用性能和加载速度。 这个"webpack-develop.zip"压缩包中的内容应该包括了基本...
vue3加入的新特性Tree-Shaking介绍及原理
feixin369的博客
03-04 908
Vue 2的设计和构建是基于 ES5 时代完成，大多数功能和组件是以对象的形式暴露出来的，而且整个库的组织方式和设计没有针对 Tree-shaking 这种高级的代码优化进行特别的优化。在 Vue 2中，大部分组件是通过直接引入 Vue 对象的属性来使用的，这导致整个 Vue 对象以及所有的属性都会被包含进最终的构建中，无法精确地按需引入。就是解决这个问题的办法，只需要在方法前面加上上面的代码，程序运行的时候就会认为他是没有副作用的，可以放心的进行。，将没有使用的模块代码移除掉，削减项目的体积。
关于esmodule的使用与webpack的tree-shaking
qingkongwl1的博客
08-10 542
esmodule的使用，看这篇文章就好了：https://es6.ruanyifeng.com/#docs/module#export-%E4%B8%8E-import-%E7%9A%84%E5%A4%8D%E5%90%88%E5%86%99%E6%B3%95
webpack高级应用篇（九）：tree shaking（usedExports） 与 sideEffects
知之为知之，不知为不知
12-14 3335
你可以将应用程序想象成一棵树。绿色表示实际用到的 source code(源码) 和 library(库)，是树上活的树叶。灰色表示未引用代码，是秋天树上枯萎的树叶。为了除去死去的树叶，你必须摇动这棵树，使它们落下。 *tree shaking* 是一个术语，通常用于描述**移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块语法的 [静态结构]特性，例如 import、export
webpack 4
m0_59757829的博客
08-30 227
.。
Tree Shaking只支持ES6的 ES module
xiaofanguan的博客
03-31 1365
Tree Shaking只支持ES6的 ES module webpack.config.js module.exports={ mode:'development' ..., optimization:{ usedExports:true } } package.json { "name":"lesson", //方式一 "sideEffects":false, //方式二...
lodash按需引入
weixin_45377314的博客
04-21 3685
本文转载于 一花一世界 一叶一菩提 发表于 博客园的文章， 原文链接：https://www.cnblogs.com/fancyLee/p/10932050.html lodash提供了很多可用的方法供我们使用，绝对是一个很好用且用起来得心应手的工具库。但是同时，lodash的体积也不小，我们项目中使用的大概522K，可能只是使用了几个方法，但是却把整个lodash库引入了。为了吃几条鱼，就承包了...
vue实现tree-shaking
03-29
Vue.js 内置了一些 tree-shaking 工具，可以帮助我们在项目构建时去除无用的代码。 1. 使用 Vue CLI Vue CLI 提供了一个名为 "modern" 模式，可以自动启用 tree-shaking，将未使用的代码从最终构建中删除。 要使用 "modern" 模式，只需在构建时添加 `--modern` 标志： ``` vue-cli-service build --modern ``` 2. 使用 ES2015 模块语法 Vue.js 组件可以使用 ES2015 模块语法导出。这种导出方式可以让 tree-shaking 更加精确地去除未使用的代码。 例如，假设我们有一个组件： ``` // MyComponent.vue <template> <div>My Component</div> </template> <script> export default { name: 'MyComponent', data() { return { message: 'Hello world' } } } </script> ``` 如果我们使用 CommonJS 导出： ``` module.exports = { name: 'MyComponent', data() { return { message: 'Hello world' } } } ``` 那么 tree-shaking 工具可能无法确定哪些代码是未使用的。 但是，如果我们使用 ES2015 模块语法导出： ``` export default { name: 'MyComponent', data() { return { message: 'Hello world' } } } ``` 那么 tree-shaking 工具可以更准确地确定哪些代码是未使用的。 3. 使用 webpack-bundle-analyzer webpack-bundle-analyzer 可以帮助我们分析构建后的包，找出哪些模块占用了最多的空间。 首先，我们需要安装 webpack-bundle-analyzer： ``` npm install --save-dev webpack-bundle-analyzer ``` 然后，在 webpack 配置中添加一个插件： ``` const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin module.exports = { // ... plugins: [ new BundleAnalyzerPlugin() ] } ``` 运行构建命令后，webpack-bundle-analyzer 将会打开一个可视化界面，帮助我们分析构建后的包。 4. 使用 terser-webpack-plugin terser-webpack-plugin 是一个用于压缩 JavaScript 代码的 webpack 插件。它可以在压缩代码的同时去除未使用的代码。 首先，我们需要安装 terser-webpack-plugin： ``` npm install --save-dev terser-webpack-plugin ``` 然后，在 webpack 配置中添加一个插件： ``` const TerserPlugin = require('terser-webpack-plugin') module.exports = { // ... optimization: { minimizer: [ new TerserPlugin({ terserOptions: { ecma: undefined, warnings: false, parse: {}, compress: {}, mangle: true, // Note `mangle.properties` is `false` by default. module: false, output: null, toplevel: false, nameCache: null, ie8: false, keep_classnames: undefined, keep_fnames: false, safari10: false, }, }), ], }, } ``` 运行构建命令后，terser-webpack-plugin 将会在压缩代码的同时去除未使用的代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值