12、webpack构建--移除未引用代码(tree shaking )

- 日理万妓 2022-01-27 15:19 740阅读 0赞

tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export。这个术语和概念实际上是兴起于 ES2015 模块打包工具 rollup。

新的 webpack 4 正式版本，扩展了这个检测能力，通过 package.json 的 "sideEffects" 属性作为标记，向 compiler 提供提示，表明项目中的哪些文件是 "pure(纯的 ES2015 模块)"，由此可以安全地删除文件中未使用的部分。

1、添加一个通用模块

在我们的项目中添加一个新的通用模块文件 src/math.js，此文件导出两个函数

export function square(x) {
      return x * x;
    }
    
    export function cube(x) {
      return x * x * x;
    }

2、更改src/index.js,引用其中一个方法

import { cube } from './math.js';
    
      function component() {
       var element = document.createElement('pre');
       element.innerHTML = [
         'Hello webpack!',
         '5 cubed is equal to ' + cube(5)
       ].join('\n\n');
       
        return element;
      }
    document.body.appendChild(component());

注意，我们并未从 src/math.js 模块中 import 导入 square 方法。这个功能是所谓的“未引用代码(dead code)”，也就是说，应该删除掉未被引用的 export。

3、告知工程是无副作用，可以不用导入square，修改package.json

{
      "name": "your-project",
      "sideEffects": false
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，740人围观）

还没有评论，来说两句吧...

相关阅读

相关 Webpack之Tree shaking

文章目录 * 引入 * 使用 * 问题引入了解Tree Shaking之前先来看一个例子： **math.js：** export...

桃扇骨/ 2024年04月17日 15:30/ 0 赞/ 53 阅读

相关 Webpack的Tree Shaking。它的作用是什么？

聚沙成塔·每天进步一点点 ⭐ 专栏简介前端入门之旅：探索Web开发的奇妙世界欢迎来到前端入门之旅！感兴趣的可以订阅本专栏哦！这个专栏是为那些对Web开发感

女爷i/ 2024年02月20日 12:03/ 0 赞/ 38 阅读

相关什么是Webpack的Tree Shaking？它的作用是什么？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ Webpack的Tree Shaking ⭐ 作用和原理 ⭐ 使用 Tree Shaking ⭐

缺乏、安全感/ 2023年10月16日 08:46/ 0 赞/ 59 阅读

相关 Webpack_（高级概念4.1）_Tree Shaking 概念详解

Tree Shaking 概念详解 Tree Shaking指的是什么？打开项目进入index.js文件中，清空代码，然后打包项目，不会报错，但是实际上会报一个警告

梦里梦外;/ 2023年06月24日 08:05/ 0 赞/ 118 阅读

相关如何使用Tree-shaking减少代码构建体积

如何使用Tree-shaking减少代码构建体积前言在实际配置`Webpack`过程中总会遇到一些坑，`Tree-shaking`就是其中之一，按照教程中

àì夳堔傛蜴生んèń/ 2022年11月25日 04:25/ 0 赞/ 317 阅读

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

一、什么是 Tree Shaking Tree-Shaking 是一种基于 ES Module 规范的 Dead Code Elimination 技术，它会在运行过程中

秒速五厘米/ 2022年09月10日 00:26/ 0 赞/ 338 阅读

相关【Webpack 性能优化系列(5) - tree shaking 】去除未引用代码，减少代码体积！！！

webpack系列文章： [【Webpack 性能优化系列(9) - 多进程打包】极大的提升项目打包构建速度！！！][Webpack _9_ -] [【Webpa

淩亂°似流年/ 2022年09月09日 13:48/ 0 赞/ 196 阅读

相关【javascript】webpack code split && tree shaking

webpack打包vue项目之后的文件太大，本身我们项目的体量也比较大，首次加载太慢。所以尝试代码分割，对打包之后的app.js进行拆分。 1，[动态加载][Link 1

Dear 丶/ 2022年05月27日 09:11/ 0 赞/ 164 阅读

相关 12、webpack构建--移除未引用代码(tree shaking )

tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如

- 日理万妓/ 2022年01月27日 15:19/ 0 赞/ 741 阅读

相关 webpack4 去除未使用代码tree shaking

只对import语法有效若要对require语法有效,在babel-loader的预设中添加modules:true转换成es6模块 "pres

不念不忘少年蓝@/ 2021年07月24日 18:15/ 0 赞/ 349 阅读