webpack学习--tree-shaking剔除无用代码

最新推荐文章于 2024-07-29 09:53:05 发布

小章鱼哥

最新推荐文章于 2024-07-29 09:53:05 发布

阅读量5k

点赞数

分类专栏： webpack 文章标签： webpack tree-shaking

本文链接：https://blog.csdn.net/u014787301/article/details/79698839

版权

本文介绍了webpack中的tree-shaking技术，该技术通过分析ES模块，删除未使用的代码以实现优化。起源于rollup.js，tree-shaking在webpack中结合UglifyJSPlugin可以删除未引用的函数。然而，它主要针对模块导入导出的优化，对于隐藏在模块内部的无用代码，仍需要compiler如google的closure compiler进一步处理。

摘要由CSDN通过智能技术生成

tree-shaking，了解一下？
这里写图片描述

1. 例子

在webpack，在pro模式下，UglifyJSPlugin插件可以为我们适当的压缩代码。

具体是怎么压缩的呢？

配置UglifyJSPlugin。

const path = require('path');
+ const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小章鱼哥

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Tree-Shaking性能优化实践 - 原理篇

weixin_34273481的博客

01-04

1034

一. 什么是Tree-shaking先来看一下Tree-shaking原始的本意上图形象的解释了Tree-shaking 的本意，本文所说的前端中的tree-shaking可以理解为通过工具"摇"我们的JS文件，将其中用不到的代码"摇"掉，是一个性能优化的范畴。具体来说，在 webpack 项目中，有一个入口文件，相当于一棵树的主干，入口文件有很多依赖的模块，相当于树枝。实际情况中，虽然依赖了某个...

16. webpack优化配置-tree shaking 剔除无用的代码

草木红的博客

08-18

921

tree shaking只需注意下面的前提即可，无需其他配置。前提： 1. 必须使用ES6模块化 2.webpack配置文件中的mode开启production环境注意：package.json文件添加sideEffects配置来实现哪些文件需要进行tree shaking。 “sideEffects”:false 所有代码都可以进行tree shaking，css文件可能直接被删除。 “sideEffects”:["*.css"] css文件不要进行tree shaking 入口文件inde

参与评论您还未登录，请先登录后发表或查看评论

【webpack】使用useless-files-webpack-plugin插件清理无用文件

最新发布

沧海一比特的博客

07-29

257

使用useless-files-webpack-plugin插件自动检测哪些是无用的文件

webpack4 去除未使用代码tree shaking

weixin_43294560的博客

01-16

620

1、设置生产环境 mode='production' 2、配置在package.json中,与dependencies同级设置 "sideEffects":false, 所有文件都没有副作用,可以安全修剪,可能会将导入的css或者@babel/polyfill等文件删掉 "sideEffects":["*.css"] 指定不修剪css文件参考网址:https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-sid

Webpack 原理系列九：Tree-Shaking 实现原理

奇舞周刊

09-02

1758

一、什么是 Tree ShakingTree-Shaking 是一种基于 ES Module 规范的 Dead Code Elimination 技术，它会在运行过程中静态分析模块之间的导...

【译】如何在 Webpack 2 中使用 tree-shaking

weixin_34304013的博客

08-22

219

原文地址：How to do proper tree-shaking in Webpack 2 原文作者：Gábor Soós 译文出自：掘金翻译计划本文永久链接：github.com/xitu/gold-m… 译者：薛定谔的猫校对者：lsvih、lampui 如何在 Webpack 2 中使用 tree-shaking tree-shaking 这个术语首先源自 Rollup -- ...

webpack中Tree-Shaking性能优化

Riona_cheng的博客

09-03

652

webpack中使用Tree-Shaking来优化性能的方法

webpack5-demo

03-12

6. **Tree Shaking**：Webpack 5 改进了 Tree Shaking，这是一种优化技术，可以移除未使用的代码，减少最终打包文件的大小。通过 ES6 的静态导入语法，Webpack 可以更准确地识别并剔除无用模块。 7. **TypeScript ...

tree-shaking效果探讨

joyer

11-13

231

webpack等构建工具提供tree-shaking机制, 利用es6中Module的语法的export和import语法进行静态分析,对无用代码进行剔除,减少打包后的代码量. 启动webpack的tree-shaking,需要: webpack在v2.0以上开启代码压缩 webpack只是标记语句依赖以及是否使用, tree-shaking的具体实现一般是由压缩器提供实现, 如webpack默认的压缩工具terser-webpack-plug就支持tree-shaking.本文不是讨论如何启用tre

Webpack5 系列（五）：Tree Shaking

weixin_41990299的博客

09-05

theme: jzman highlight: atelier-cave-light 一、前言上一篇讲到对JS语法的处理，本篇将介绍 Tree Shaking 。 ```jsx // math.js const add = (a, b) => a + b; const minus = (a, b) => a - b; export { add, minus } //...

webpack的tree shaking的实现方法

12-13

webpack的tree shaking util.js export const a = () => { console.log("a123456方法"); }; export const b = () => { console.log("b123456方法"); }; main.js import {a} from './utils'; a(); sideEffects 一般而言，上述代码，在 webpack 进行 tree shaking 能够不打包 function b 的代码，这是因为 webpack 对代码进行了分析， b 没有引用不会打包。但是npm包中，通过

webpack使用使用TreeShaking实例

04-17

webpack使用使用TreeShaking实例webpack使用使用TreeShaking实例

tree shaking的原理是什么?

cxz

07-14

3020

别名叫摇晃树，最早是由Rollup实现，是一种采用删除不需要的额外代码的方式优化代码体积的技术 tree-shaking会在打包过程中静态分析模块之间的导入导出，确定哪些模块导出值没有被使用，并将其删除，从而实现了打包产物的优化。在之前CommonJs、AMD、CMD的模块化方案中，这种导入导出是动态的，难以预测的，因此在打包阶段，是无法分析哪些模块被使用，例如：而ES 静态module方案下，模块之间的依赖关系是高度确定的静态的，与运行状态无关，可以进行可靠的静态分析，因此整个依赖树可以被静态地推导

Tree-Shaking 作用和实现原理

似水流年QC的博客

01-23

3096

Tree-shaking 它的名字来源于通过摇晃（shake）JavaScript代码的抽象语法树（AST），是一种用于优化JavaScript代码的技术，主要用于移除未被使用的代码，使得最终生成的代码包含应用程序中实际使用的部分。这主要用于减小应用程序的体积，提高加载性能。在前端开发中，特别是在使用模块化工具（如Webpack、Rollup等）构建应用程序时，通常会引入许多库和模块。然而，应用程序可能只使用了这些库的一小部分功能，导致最终生成的代码包含了大量未被使用的代码。

Tree Shaking 概念

purple_lumpy的博客

03-19

1026

我们先来写一个例子，在 src 目录下，创建一个文件 math.js 。它导出两个方法。如下 export const add = (a,b) => { console.log(a+b); } export const minus = (a,b) => { console.log(a-b); } 然后，在 index.js 中引入，如下。 import {add} fro...

AI题库：Webpack中的Tree Shaking原理

SAXX2的博客

04-15

574

Tree Shaking 是 Webpack 提供的一种代码优化技术，能够消除无用代码，减小最终打包文件的体积，提高应用程序的运行效率。在实际开发中，我们可以充分利用 Tree Shaking，优化我们的代码。其中，Tree Shaking 是一种消除无用代码的优化手段，能够有效减少最终打包文件的体积。当 Webpack 处理应用程序时，它会递归地构建一个依赖关系图（dependency graph），其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。// 输出 3 ```

tree-shaking

Jason's Word

08-10

968

先问一个问题：对于打包后的文件你关注的是什么? 简单的变量话的压缩技术已经不够了其实13年就有一篇外文专门介绍了单纯压缩已经远远不够了，稍后我们也会放出原文它的由来？最早是 rollup 的作者 Rich Harris 在自己的打包工具中设计的一个特性 It only includes the bits

Webpack优化：tree-shaking深度解析

总结来说，Webpack的tree-sharking是通过分析AST来识别并剔除未使用的代码，提高打包效率和优化输出文件大小的有效手段。配合使用正确的代码组织策略和相关插件，可以显著降低项目的加载时间，提升用户体验。在开发...