webpack 文档（指南）- 摇树优化

最新推荐文章于 2023-08-22 18:45:34 发布
最新推荐文章于 2023-08-22 18:45:34 发布
阅读量436 收藏 2
点赞数 1
分类专栏： 前端 # webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36605165/article/details/116845921
版权

摇树优化，即打包编译的时候移除未使用的代码。但是有一个前提，我们编写的代码必须是基于 ES6 Module 的静态结构特性的。

以下是静态结构的代码。

import a from './a';
import b from './b';
export default a;

以下是非静态结构的代码。

console.log('index.js');
const flag = Math.random();
if (flag) {
    module.exports = 1;
} else {
    module.exports = {};
}

if (flag) {
    require('./a.js');
} else {
    require('./b.js');
}

准备 demo

unused.js

const a = 1;
const b = () => {
    return 'test.js';
}
export {a, b};

math.js

export function add(a, b) {
    return a + b;
}
export function sub(a, b) {
    return a - b;
}

inde.js

// 它包含了两个函数，只使用其中的一个函数
import {add} from './math';
// 只引入但未使用
import * as unused from './unused';

const result = add(55, 45);
console.log(result);

开发环境测试

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
var {
    CleanWebpackPlugin
} = require('clean-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: {
        index: './index.js',
    },
    output: {
        publicPath: '',
        path: __dirname +  '/dist',
        filename: '[name].js'
    },
    module: {
        rules: []
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './index.html'
        }),
    ]
}

./dist/index.js (代码片段)

"./index.js":
(function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval(`__webpack_require__.r(__webpack_exports__);\n
/* harmony import */ 
var _math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./math */ \"./math.js\");\n
/* harmony import */ 
var _unused__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./unused */ \"./unused.js\");\n\r\n\r\n\r\n
const result = Object(_math__WEBPACK_IMPORTED_MODULE_0__[\"add\"])(55, 45);\r\n
console.log(result);\n\n
//# sourceURL=webpack:///./index.js?`);

}),

"./math.js":
(function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval(`__webpack_require__.r(__webpack_exports__);\n
/* harmony export (binding) */
 __webpack_require__.d(__webpack_exports__, \"add\", function() { return add; });\n
 /* harmony export (binding) */ 
 __webpack_require__.d(__webpack_exports__, \"sub\", function() { return sub; });\n
 function add(a, b) {\r\n    return a + b;\r\n}\r\n
 function sub(a, b) {\r\n    return a - b;\r\n}\n\n
 //# sourceURL=webpack:///./math.js?`);

}),

"./unused.js":
(function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval(`__webpack_require__.r(__webpack_exports__);\n
/* harmony export (binding) */ 
__webpack_require__.d(__webpack_exports__, \"a\", function() { return a; });\n
/* harmony export (binding) */ 
__webpack_require__.d(__webpack_exports__, \"b\", function() { return b; });\n
const a = 1;\r\n
const b = () => {\r\n    
  return 'test.js';\r\n
}\r\n\n\n
//# sourceURL=webpack:///./unused.js?`);

})

发现默认情况下，webpack不会进行摇树优化。

在 webpack 的配置文件中加入 optimization.usedExports 的配置（可以对代码做一些注释标记，方便其他优化工具或代码使用，如标记未使用的代码）。

webpack.cofig.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
var {
    CleanWebpackPlugin
} = require('clean-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: {
        index: './index.js',
    },
    optimization: {
        usedExports: true
    },
    output: {
        publicPath: '',
        path: __dirname +  '/dist',
        filename: '[name].js'
    },
    module: {
        rules: []
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './index.html'
        }),
    ]
}

./dis/index.js （代码片段）

"./index.js":
(function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval(`__webpack_require__.r(__webpack_exports__);\n
/* harmony import */ 
var _math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./math */ \"./math.js\");\n
/* harmony import */ 
var _unused__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./unused */ \"./unused.js\");\n\r\n\r\n\r\n
const result = Object(_math__WEBPACK_IMPORTED_MODULE_0__[/* add */ \"a\"])(55, 45);\r\n
console.log(result);\n\n
//# sourceURL=webpack:///./index.js?`);

}),

"./math.js":
(function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval(`/* harmony export (binding) */ 
__webpack_require__.d(__webpack_exports__, \"a\", function() { return add; });\n
/* unused harmony export sub */\n
function add(a, b) {\r\n    return a + b;\r\n}\r\n
function sub(a, b) {\r\n    return a - b;\r\n}\n\n
//# sourceURL=webpack:///./math.js?`);

}),

"./unused.js":
(function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval(`
/* unused harmony export a */\n
/* unused harmony export b */\n
const a = 1;\r\n
const b = () => {\r\n    return 'test.js';\r\n}\r\n\n\n
//# sourceURL=webpack:///./unused.js?`);

})

在开发环境下，如果配置了 optimization.usedExports 为 true ，那么会标记未使用的代码，但并不会真正的去删除它们，如果要删除这些未使用的代码，需要配置为生产环境。

在这里插入图片描述

生产环境测试

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
var {
    CleanWebpackPlugin
} = require('clean-webpack-plugin');
module.exports = {
    mode: 'production',
    entry: {
        index: './index.js',
    },
    output: {
        publicPath: '',
        path: __dirname +  '/dist',
        filename: '[name].js'
    },
    module: {
        rules: []
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './index.html'
        }),
    ]
}

./dis/index.js

! function (e) {
    var t = {};

    function n(r) {
        if (t[r]) return t[r].exports;
        var o = t[r] = {
            i: r,
            l: !1,
            exports: {}
        };
        return e[r].call(o.exports, o, o.exports, n), o.l = !0, o.exports
    }
    n.m = e, n.c = t, n.d = function (e, t, r) {
        n.o(e, t) || Object.defineProperty(e, t, {
            enumerable: !0,
            get: r
        })
    }, n.r = function (e) {
        "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
            value: "Module"
        }), Object.defineProperty(e, "__esModule", {
            value: !0
        })
    }, n.t = function (e, t) {
        if (1 & t && (e = n(e)), 8 & t) return e;
        if (4 & t && "object" == typeof e && e && e.__esModule) return e;
        var r = Object.create(null);
        if (n.r(r), Object.defineProperty(r, "default", {
                enumerable: !0,
                value: e
            }), 2 & t && "string" != typeof e)
            for (var o in e) n.d(r, o, function (t) {
                return e[t]
            }.bind(null, o));
        return r
    }, n.n = function (e) {
        var t = e && e.__esModule ? function () {
            return e.default
        } : function () {
            return e
        };
        return n.d(t, "a", t), t
    }, n.o = function (e, t) {
        return Object.prototype.hasOwnProperty.call(e, t)
    }, n.p = "", n(n.s = 0)
}([function (e, t, n) {
    "use strict";
    n.r(t);
    const r = function (e, t) {
        return e + t
    }(55, 45);
    console.log(r)
}]);

在生产模式下，webpack 对代码已经做了极致优化，发现未使用的代码都不见了。。

sideEffects

sideEffects 指的是有副作用的代码，假如模块 A 中包含一些影响全局作用域（非模块作用域）的代码，如改变了全局的变量或对象的变量（例如一些 polyfill ），模块 B 引入了模块 A ，但只使用它的部分导出或根本没有使用它的导出。在这种情况下，模块 A 就被认为是有副作用的，webpack 是不会删除模块 A 中所有未使用的代码的，它还会保留模块 A 中立即执行并对全局环境有影响的代码！

math.js

export function add(a, b) {
    return a + b;
}
export function sub(a, b) {
    return a - b;
}
// 副作用的代码，修改了全局的东西，会被保留
Number.prototype.add = add;

如果项目中所有模块都不会有副作用，那么可以在 webpack 的配置中将 optimization.sideEffects 设为 false ，这样可以提高删除未使用代码的编译速度。如果有某些模块是有副作用的，那么可以将它的路径加入 package.json 的 sideEffects 数组选项中，这样也能提高删除未使用代码的速度。

package.json

{
  "name": "webpack",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "webpack"
  },
  "sideEffects": [
    "./math.js"
  ]
}

当然，sideEffects 这个选项不是必须要配置的！

qin & kong
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack-upload-plugin:Webpack插件
05-13
webpack-upload-plugin介绍这是的插件。 主要目的是提供一个工具，用于将html（或其他语言的模板）中使用的js / css / img / font上传到cdn，然后将引用替换为相应的cdn url。环境要求节点> = 10.5.0安装npm i -D ...
react-webpack-HMR-middleware:通过webpack-dev-middleware和webpack-hot-middleware对热模块重新加载做出React
05-07
react-webpack-HMR-middleware有三种方式实现热加载:使用使用使用中间件关于怎么选择合适的方式, 这有一些简单的解释.尽可能的简化安装, 选择 webpack-dev-server CLI.如果想要使用a task runner类似于grunt 或 gulp...
tree shaking(摇树优化)
热门推荐
m0_50074446的博客
06-09 1万+
前端性能优化之tree-shaking
import、require、export、module.exports 混合使用详解
油墨香^-^的博客
03-30 2484
自从使用了 es6 的模块系统后，各种地方愉快地使用import，但也会在老项目中看到使用commonjs规范的require。甚至有时候也会常常看到两者互用的场景。使用没有问题，但其中的关联与区别不得其解，使用起来也糊里糊涂。为何有的地方使用require去引用一个模块时需要加上default？经常在各大UI组件引用的文档上会看到说明这样会引入所有组件内容，需要添加额外的 babel 配置，比如？
webpack性能优化 一文带你彻底了解webpack如何进行摇树 webpack打包器，terser，useexports和sideeffect的使用和区别
最新发布
dxh9231028的博客
08-22 427
那么terser能去除哪些webpack打包器无法识别但确实为无用代码的代码呢，那么我们看webpack打包器对无用代码的理解，违背修改过的变量，那么如果我们定义一个对象，在对这个对象进行简单的修改，那这个对象就是有用的代码了吗，显然不是，所以tarser对无用代码的定义是未被使用过的变量。webpack打包器是webpack自身携带的打包工具，其本身自带一定的摇树功能，其可以将未引用的模块，未被其他文件引入的导出值，未被执行的代码块以及未被修改过的变量定义为无用代码，通过摇树，在打包过程将其删除。
webpack中的tree shaking(树摇)-----移除未使用的代码
前端LV0的博客
12-21 1311
引用webpack官网的原文来说：tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块语法的 静态结构 特性，例如 import 和 export。这个术语和概念实际上是由 ES2015 模块打包工具 rollup 普及起来的。我们经常能看到一个模块会导出很多个不同的东西，但是实际项目可能并不会全部引用，举个例子：假设我们有一个工具函数文件utils.js，里面有两个方法，一个是两数相加求和的add。
webpack打包优化之减少代码体积(Tree shaking、babel)
jieyucx的博客
06-17 581
在Tree shaking过程中，Webpack会自动分析项目中每个模块的引用关系，只有被引用过的模块和代码块才会被打包到输出文件中，未被引用的模块和代码块则会被删除，以减少输出文件大小。这样就可以标记和删除没有使用过的代码，从而减小打包后文件的体积，提升网站性能。，因为ES6模块化中的代码引用关系是明确的静态分析关系，使得Webpack能够方便地判断哪些代码需要被打包。babel会对ES6及以上的代码进行转译成ES5的代码，而ES5的代码存在一些冗余的部分，也就是所谓的辅助代码。因此会增加代码的体积。
webpack-使用webpack-dev-server.rar
04-12
webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载。这里用一个最简单的例子，让大家迅速的了解原理，避免被其他的附加技术干扰。
webpack-extension-reloader：从“ webpack-chrome-extension-reloader”的升级，现在在所有浏览器上
02-06
正在安装npm npm install webpack-extension-reloader --save-dev 纱yarn add webpack-extension-reloader --dev解决方案... 您是否曾经在开发浏览器扩展时感到恼火，并且因为它不是Web应用程序而是浏览器扩展而无法...
webpack-subresource-integrity：用于启用Subresource完整性的Webpack插件
02-06
webpack-subresource-integrity Webpack插件，用于启用子资源完整性。 （SRI）是一项安全功能，使浏览器可以验证是否已交付获取的文件（例如，从CDN获取的文件）而没有意外的操作。 产品特点 与可选集成。 自动...
浅析webpack 如何优雅的使用tree-shaking（摇树优化）
10-19
主要介绍了webpack 如何使用tree-shaking（摇树优化）,本文介绍了什么是tree-shaking,commonJS 模块,es6 模块,怎么使用tree-shaking等,具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。
webpack 懒加载原理
前端精髓
12-02 1316
分析 __webpack_require__.f = {} __webpack_require__.e = (chunkId) => { return Promise.all(Object.keys(__webpack_require__.f).reduce((promises, key) => { // promises = [], key = "j" // chunkId = src_title_js, promises = [] __webpack_requir
webpack的Tree Shaking原来要这么使用才有效
qq_41831345的博客
02-16 2364
先来了解一下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
TypeScript 发布 4.9 beta
淘系技术
10-17 1014
TypeScript 已于 2022.09.23 发布 4.9 beta 版本，你可以在 4.9 Iteration Plan 查看所有被包含的 Issue 与 PR。如果想要抢先体验新特性，执行：$npminstalltypescript@beta来安装 beta 版本的 TypeScript，或在 VS Code 中安装 JavaScript and TypeScript Nightly...
Webpack 原理系列九：Tree-Shaking 实现原理
zjjcchina的博客
11-05 1459
一、什么是 Tree Shaking Tree-Shaking 是一种基于 ES Module 规范的 Dead Code Elimination 技术，它会在运行过程中静态分析模块之间的导入导出，确定 ESM 模块中哪些导出值未曾其它模块使用，并将其删除，以此实现打包产物的优化。 Tree Shaking 较早前由 Rich Harris 在 Rollup 中率先实现，Webpack 自 2.0 版本开始接入，至今已经成为一种应用广泛的性能优化手段。 1.1 在 Webpack 中启动 Tree S
先记webpack5对比webpack4打包运行代码
clbdgs的博客
06-02 497
/******/ (() => { // webpackBootstrap /******/ "use strict"; /******/ var __webpack_modules__ = ([ /* 0 */, /* 1 */ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); /* har.
python从入门到精通——模块11
cyl16688
11-06 120
一，模块概述 二，自定义模块 三，Python中的包 四，引用其他模块
前端工程化打包工具webpack和vite的摇树（Tree Shaking）优化
墨者阳明
08-11 1192
如果没有进行优化，所有引入的模块都会被打包到最终的输出文件中，导致文件变得很大，加载时间变长，影响应用的性能。使用Babel Loader确实有可能导致Tree-shaking失效，这是因为Babel Loader默认情况下会将所有ES6模块转换为CommonJS模块，而CommonJS模块的导入和导出方式是动态的，无法在编译时进行静态分析。它内置了摇树优化功能，并可以通过配置选项进行进一步的优化。在实际过程中，我们会发现，有些css模块是全局，因为没有申明副作用，也一起被移除，所以需要单独排除掉，比如。
webpack 打包之后的代码学习
dongcehao的博客
05-28 680
export default function count (a, b) { return a + b } import number from './number' export default function add (a, b) { return number(a, b); } // add('100', '900') (function webpackUniversalModuleDefinition(root, factory)...
webpack webpack-cli webpack-dev-server配置
08-16
npm install webpack webpack-cli webpack-dev-server --save-dev ``` 4. 在项目根目录下创建一个`webpack.config.js`文件，并添加以下基本配置： ```javascript const path = require('path'); module....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值