webpack——tree shaking(九)

最新推荐文章于 2025-01-25 11:42:16 发布
最新推荐文章于 2025-01-25 11:42:16 发布
阅读量190 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20464593/article/details/106389874
本文深入探讨Webpack的TreeShaking特性，介绍如何通过配置实现模块的按需加载，减少最终包体积，提升应用性能。文章详细讲解了ESModule与commonjs的区别，以及TreeShaking在不同模式下的配置方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在src目录下新建一个math.js文件,现在目录结构如下:
在这里插入图片描述
src/math.js

export const add = (a, b) => {
    console.log( a + b )
}
export const minus = (a, b) => {
    console.log( a - b )
}

src/index.js

import { add } from './math.js'
add(1, 2)

现在让我们运行npx webpack，并检查输出的 bundle：

dist/app.bundle.js

/***/ "./src/math.js":
/*!*********************!*\
  !*** ./src/math.js ***!
  \*********************/
/*! exports provided: add, minus */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "add", function() { return add; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "minus", function() { return minus; });
const add = (a, b) => {
  console.log(a + b);
};
const minus = (a, b) => {
  console.log(a - b);
};

/***/ })

/******/ });

注意到math.js文件中minus并没有被导入，但是，它仍然被包含在 bundle 中。
理想的打包方式应该是:引入什么打包什么。

注: Tree Shaking 只支持ES Module, commonjs就不行。
ES Module 和commonjs的区别:
-ES Module静态引入, 编译时引入
-commonjs动态引入, 执行时引入
-只有ES Module才能静态分析, 实现tree-shaking

接下来看Tree Shaking的配置
development模式下默认没有Tree Shaking功能, devtool要设置为: cheap-module-eval-source-map。
webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const webpack = require('webpack')
module.exports = {
    //默认没有Tree Shaking功能, devtool: cheap-module-eval-source-map
    mode: 'development',
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        contentBase: './dist',
        open: true,
        port: 8080,
        hot: true,
        hotOnly: true
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',  //babel-loader:babel和webpack中间的桥梁
                options: {
                    "presets": [
                        [
                        //es6=>es5
                        "@babel/preset-env", {
                            "targets": {
                                // "edge": "17",
                                // "firefox": "60",
                                // "chrome": "67",
                                "safari": "11.1",  //以上版本已经支持es6,不需要再做es6=>es5
                            },
                            useBuiltIns: 'usage'  
                        }
                        ],
                        "@babel/preset-react", //转化react代码
                    ], 

                // "plugins": [
                //     [
                //       "@babel/plugin-transform-runtime",
                //       {
                //         //安装: npm install --save @babel/runtime-corejs2
                //         "corejs": 2,
                //         "helpers": true,
                //         "regenerator": true,
                //         "useESModules": false,
                //       }
                //     ]
                // ]
                }
            },
            {
                test:/\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
        ]
    },
    entry: {
        app: './src/index.js',
        // print: './src/print.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        //publicPath也会在服务器脚本用到,确保资源能够在 http://localhost:3000下正确访问
        publicPath: '/'  
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new CleanWebpackPlugin(),
        new webpack.HotModuleReplacementPlugin() //要先引入webpack,是webpack自带的插件
    ],
    //Tree Shaking配置项
    optimization: {
        usedExports: true
    }
}

还需要在package.json写一个配置项:

{
  "name": "lesson0523_new",
  "sideEffects": false
}

当在index.js文件中引入了一个样式表style.css即import './style.css',但样式表显然没有导出任何内容就会被摇晃树摇晃掉。
如果你的代码确实有一些副作用，那么可以改为提供一个数组：

{
  "name": "lesson0523_new",
  "sideEffects": ["*.css"]
}

再次运行npx webpack并检查输出的 bundle：
在这里插入图片描述

而当production模式下,则有Tree Shaking功能,不需要配置项,但要修改devtool: cheap-module-source-map
webpack.config.js:

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const webpack = require('webpack')
module.exports = {
    //默认没有Tree Shaking功能, devtool: cheap-module-eval-source-map
    // mode: 'development',
    mode: 'production',
    // devtool: 'cheap-module-eval-source-map',
    devtool: 'cheap-module-source-map',
    devServer: {
        contentBase: './dist',
        open: true,
        port: 8080,
        hot: true,
        hotOnly: true
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',  //babel-loader:babel和webpack中间的桥梁
                options: {
                    "presets": [
                        [
                        //es6=>es5
                        "@babel/preset-env", {
                            "targets": {
                                // "edge": "17",
                                // "firefox": "60",
                                // "chrome": "67",
                                "safari": "11.1",  //以上版本已经支持es6,不需要再做es6=>es5
                            },
                            useBuiltIns: 'usage'  
                        }
                        ],
                        "@babel/preset-react", //转化react代码
                    ], 

                // "plugins": [
                //     [
                //       "@babel/plugin-transform-runtime",
                //       {
                //         //安装: npm install --save @babel/runtime-corejs2
                //         "corejs": 2,
                //         "helpers": true,
                //         "regenerator": true,
                //         "useESModules": false,
                //       }
                //     ]
                // ]
                }
            },
            {
                test:/\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
        ]
    },
    entry: {
        app: './src/index.js',
        // print: './src/print.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        //publicPath也会在服务器脚本用到,确保资源能够在 http://localhost:3000下正确访问
        publicPath: '/'  
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new CleanWebpackPlugin(),
        new webpack.HotModuleReplacementPlugin() //要先引入webpack,是webpack自带的插件
    ],
    //Tree Shaking配置项
    // optimization: {
    //     usedExports: true
    // }
}

再次运行npx webpack,再次查看bundle.js文件minus已经剔除掉了。
打包生成线上代码,已经把minus剔除掉了,说明Tree Shaking功能生效。

Rollup vs Webpack：谁才是Tree Shaking的最佳实践者？
小白菜的博客
06-12 942
现代前端项目就像一个巨型拼图：你可能用了React做界面，Lodash做工具函数，Axios发请求…但实际项目中，我们真正用到的可能只是这些库的"冰山一角"。比如Lodash有200多个函数，你可能只用了_.debounce。如果打包工具不处理，这些未使用的代码都会被塞进最终的JS文件里，导致加载变慢、用户体验变差。Tree Shaking的核心逻辑两者的技术差异（静态分析能力、副作用处理等）实际项目中的配置技巧适用场景建议优势。
【JavaScript 性能优化】构建工具链极致优化——从 Tree Shaking 到预编译
最新发布
专注于人工智能、软件开发、工控自动化、工厂数字化及智能化等领域，希望和大家共同进步！
04-16 789
摘要：本文聚焦于 JavaScript 构建工具链的极致优化，深入探讨了从 Tree Shaking 到预编译的相关技术。详细分析了 Source Map 生成引发的构建速度下降、动态导入的分包策略失衡、Babel 插件链冗余转换等核心问题，并给出了相应的优化方案。同时，提供了 Webpack 配置优化示例，以及使用 SWC 替代 Babel 提速转译、基于 Chrome User Timing API 的性能打点、预编译 Vue 模板为 JavaScript 渲染函数等创新方案。最后，给出了实操流程和完整
Webpack系列——Tree Shaking
Smart_J_King的博客
01-12 707
Tree Shaking 在文件或者在组件文件中引入其他模块中的代码，但实际上我们只用到其中的一部分，剩下的代码则不需要引入，然而在默认情况下，webpack仍然是全部引入并打包的。 这时，为了把多余部分剔除出去，就要用到 “ Tree Shaking ” 了，也就是摇树。 经过 Tree Shaking，不该留在代码中的多余代码，则会被摇掉，这样能减轻代码量，提高性能。 Tree Shaking 只支持 ESM 的引入方式，不支持 Common JS 的引入方式。 ESM: export +
一文大白话讲清楚webpack基本使用——17——Tree Shaking
xiaobangkeji的博客
01-25 2372
一文大白话讲清楚webpack基本使用——17——Tree Shaking
Webpack: Tree-shaking 删除无用模块
Wang的专栏
07-04 1414
从前文，我们了解到 Webpack 从模块解析，到 Chunk 封装，到合并生成最终 Bundle 整个运行过程，接下来我们可以开始关注一些高频使用功能的底层实现，加深理解。例如，Tree-Shaking 就是一个不错的例子，它能充分优化产物代码，使用频率颇高，并且底层实现逻辑比较复杂，需要持续读取、修改 ModuleGraph 对象的状态；需要通过函数定制打包结果，等等，实现逻辑几乎贯穿了 Webpack 整个构建过程。
【Webpack】TreeShaking与静态分析
cherry__yu的博客
04-07 1420
Tree shaking 字面意就是“摇树”，通过摇树将树上枯黄的叶子摇落。tree shaking 的作用是把项目中没必要的代码全部抖落掉，消除被引用，删除没被调用的无用模块代码，该优化最终实现的是代码体积的减少，也属于项目性能优化的一部分。原理是利用 ES6 的模块化语法，通过静态分析代码之间的引用关系，来判断哪些模块未被引用，进而删除对应代码。
Webpack4.0基础教程七：tree shaking（前端系列周刊（3））
YaoDeBiAn的博客
11-24 1281
首先，在此声明一下，这篇文章之前写的时候也是有点模模糊糊，应该有很多错的地方（后半部分），或者逻辑比较乱的地方，各位小伙伴如果读这篇文章的话，感觉不清晰的地方就不要去深究了，以免浪费时间，同时把你们带偏，之后会抽空把文章纠正更新一下，在此对那些可能被我带偏的伙伴说声抱歉，同时也希望看我文章的哥们、小姐姐们能够指出我的一些问题，或者提供一些补充和一些小demo。 foreword（前言） 这里主要声...
Webpack 原理系列九：Tree-Shaking 实现原理
奇舞周刊
09-02 1906
一、什么是 Tree ShakingTree-Shaking 是一种基于 ES Module 规范的 Dead Code Elimination 技术，它会在运行过程中静态分析模块之间的导...
Webpack——性能优化介绍
weixin_42789698的博客
05-24 120
文章目录Webpack性能优化介绍一、开发环境性能优化HMR优化打包构建速度source-map优化代码调试二、生产环境性能优化oneOf优化打包速度、缓存优化、tree sharkingcode split拆分js代码、懒加载与预加载 Webpack性能优化介绍 一、开发环境性能优化 HMR优化打包构建速度 webpack.config.js /** * HMR：Hot Module Replacement 热模块替换 * 一个模块发生变化，只会重新打包这一个模块（而不是打包所有） * 极大的提
图解Webpack——优化篇
wang_yu_shun的博客
05-19 391
首先用一张利用MindMaster绘制思维导图开篇来阐述本文的主要内容，读者可在此基础上进行扩展自己的思维导图。webpack除了基础的配置外，还需要进行优化。对于开发环境主要优化打包构建速度和代码调试；对于生产环境主要优化打包的构建速度和代码运行的性能。 一、开发环境 1.1 构建速度 在开发环境中为了提升代码构建速度，可以利用HMR（模块热替换）来实现，通过该功能可以允许只变更更新内容，而不需将所有内容进行构建，极大提升构建速度。 开启 module.exports = { /.
webpack4 CSS Tree Shaking的使用
10-18
webpack2版本引入了一个革命性的新特性——Tree Shaking，这个特性最早是由rollup.js提出的，它使得在JavaScript中可以静态地分析模块依赖关系，并剔除未被使用的代码，以优化最终打包的文件大小。随着webpack的进化...
webpack——使用babel处理es6语法(七)
qq_20464593的博客
05-24 2757
1.使用babel 参考链接: https://babeljs.io/setup#installation 安装: npm install --save-dev babel-loader @babel/core 在src目录下新建index.js src/index.js //es6语法 const arr = [ new Promise(() => {}), new Promise(() => {}) ] arr.map(item => { console.l
webpack实战——TS的打包配置(三)
qq_20464593的博客
06-01 1017
项目初始 1.新建一项目type-script并初始化 npm init -y 2.新建webpack.config.js 3.新建目录src,在src目录下新建index.tsx 4.安装webpack 和webpack-cli npm install webpack webpack-cli --save-dev index.tsx class Greeter { greeting: string constructor(message: string) { this.
webpack实战——proxy配置(四)
qq_20464593的博客
06-01 795
发送ajax请求 安装: npm install axios --save-dev src/index.js // 安装: npm i react react-dom --save //react: https://babeljs.io/docs/en/babel-preset-react //remove the `import '@babel/polyfill'` call or use `useBuiltIns: 'entry'` instead // import "@babel/polyfi
webpack——加载css、图片和字体(三)
qq_20464593的博客
05-23 681
我们尝试整合一些其他资源，比如图像，看看 webpack 如何处理。 1.加载css 为了从 JavaScript 模块中 import 一个 CSS 文件，你需要在 module 配置中 安装并添加 style-loader 和 css-loader： npm install --save-dev style-loader css-loader webpack.config.js 添加规则 const path = require('path') module.exports = { //默认是
webpack——SplitChunksPlugin配置参数(十二)
qq_20464593的博客
05-28 556
代码分隔底层使用到了SplitChunksPlugin,所以接下来讲解一下SplitChunksPlugin参数的配置。 上一节执行异步代码的生成目录如下: 文件名为0.bundle.js,希望将文件名改为英文的可识别的名字,可以在异步加载组件当中加一段魔法注释: //魔法注释: /* webpackChunkName: “lodash” */ src/index.js function getComponent() { return import(/* webpackChunkName: "lo
webpack——开发(五)
qq_20464593的博客
05-24 535
1.使用 source map 当 webpack 打包源代码时，可能会很难追踪到错误和警告在源代码中的原始位置。例如，如果将三个源文件（a.js, b.js 和 c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会简单地指向到 bundle.js。这并通常没有太多帮助，因为你可能需要准确地知道错误来自于哪个源文件。 为了更容易地追踪错误和警告，JavaScript 提供了 source map 功能，将编译后的代码映射回原始源代码。如果一个错误来自于
webpack实战——Library的打包(一)
qq_20464593的博客
06-01 500
打包库文件 创建一新项目library,并初始化,生成一package.json文件 npm init -y package.json { "name": "library", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { }, "keywords": [], "author": "KATE", "license": "MIT" } 新建一src目录,在src目
webpack实战——PWA的打包配置(二)
qq_20464593的博客
06-01 425
在服务器上运行代码 模拟后端服务器 安装 npm install http-server --save-dev src/index.js console.log('hello') webpack.common.js const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const {CleanWebpackPlugin} = require('clean-webpack-plugin')
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值