摇树优化之webpack(4.6.0) tree shaking

2024-05-29 16:08

本文主要是介绍摇树优化之webpack(4.6.0) tree shaking,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

无需原生开发基础,也能完美呈现京东商城。《混合开发京东商城系统,提前布局大前端》课程融合vue、Android、IOS等目前流行的前端和移动端技术,混合开发经典电商APP——京东。课程将各种复杂功能与知识点完美融合,从技术原理到开发上线,让你真实感受到一个明星产品开发的全过程。功能实现之外,还有一流用户体验和优秀交互设计等你一探究竟,拓宽开发眼界。


1、为什么要进行tree shaking

在我们平时的开发之中,经常会引入一些工具类库, 比如说 bootstrap, f7 等等UI样式库 或者像 jQuery、lodash等一些js类库,或者自己编写一些utils类作为工具方法,但是引入的这些方法和类库我们基本不会把他们所有的功能或者说所有的方法都使用到 , 往往只是使用了其中几个方法,或者几个样式 。 这样的话 , 如果我们在打包的过程之中把整个类库都打包进来会造成极大的资源浪费,所以 摇树优化 应运而生 。

2、什么是tree shaking

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

这是webpack中对tree shaking的定义,其实就是说把我们项目中没有使用到的代码在打包的时候丢弃掉,只保留我们引入了的JS代码和css代码。

3、如何利用webpack进行tree shaking

1:JS的tree shaking

我们先来看一个没有进行tree shaking的代码。
项目结构如下
这里写图片描述

utils.js代码

export function a () {console.log('This is a');
}export function b () {console.log('This is b');
}export function c () {console.log('This is c');
}

app.js代码

import {a} from './utils.js';a();

我们可以看到 在 utils.js中我们定义了三个方法, 在app.js中引入了方法a,也就是说方法b和方法c都是没有使用的。 我们看一下打包之后的结果

/***/ "./src/js/utils.js":
/*!*************************!*\!*** ./src/js/utils.js ***!\*************************/
/*! exports provided: a, b, c */
/***/ (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/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"c\", function() { return c; });\nfunction a () {\n    console.log('This is a');\n}\n\nfunction b () {\n    console.log('This is b');\n}\n\nfunction c () {\n    console.log('This is c');\n}\n\n//# sourceURL=webpack:///./src/js/utils.js?");/***/ })

从打包之后的代码片段我们可以看到,exports provided: a, b, c, 引入方法 a, b, c 。
接下来我们使用webpack提供的plugin,UglifyjsWebpackPlugin , 来进行我们的摇树优化 ,看一下webpack对UglifyjsWebpackPlugin的定义

This plugin uses UglifyJS v3 (uglify-es) to minify your JavaScript/*webpack =< v3.0.0 currently contains v0.4.6 of this plugin under webpack.optimize.UglifyJsPlugin as an alias. For usage of the latest version (v1.0.0), please follow the instructions below. Aliasing v1.0.0 as webpack.optimize.UglifyJsPlugin is scheduled for webpack v4.0.0
*/

这是一个用来压缩你的JavaScript的插件,如果你使用的是 webpack4.0.0之前的版本,那么应该使用 webpack.optimize.UglifyJsPlugin, 如果你要使用UglifyjsWebpackPluginv1.0的话, 那么就要配合webpackV4之后的版本了。因为我们例子使用的是 webpack V4.6.0的最新版本,所以我们直接使用UglifyjsWebpackPlugin

首先我们需要安装我们的uglifyjs-webpack-plugin

npm i -D uglifyjs-webpack-plugin

接下来打开 webpack.config.js文件,进行uglifyjs-webpack-plugin的配置

var path = require('path');
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');module.exports = {mode: 'production', //注意这里需要设置生产模式entry : {'app' : './src/js/app.js'},output: {path: path.resolve(__dirname, './dist'),publicPath: './dist/',filename: '[name].bundle.js',},plugins: [new UglifyJsPlugin({test: /\.js$/}),]
}

引入 uglifyjs-webpack-plugin 在 plugins中声明 uglifyjs-webpack-plugin
打包之后的代码

!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},r.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="./dist/",r(r.s=0)}([function(e,t,r){"use strict";r.r(t),console.log("This is a")}]);

我们发现已经没有 方法b、和方法c了。

2:CSS的tree shaking

对于 css的tree shaking 我们则使用 purifycss-webpack 配合 glob-all来实现 。

npm i -D purifycss-webpack purify-css glob-all

我们在webpack.config.js中配置如下

var Purifycss = require('purifycss-webpack');
var glob = require('glob-all');plugins: [new ExtractTextPlugin({filename: '[name].bundle.css',}),// ExtractTextWebpackPlugin 具体使用方法可以参考webpack官网new Purifycss({paths: glob.sync([path.join(__dirname, './*.html'),])})]

修改 index.html 内容为

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="./dist/app.bundle.css">
</head>
<body><div class="box"></div>
</body>
</html>

style.css内容为

.box {width: 200px;height: 200px;background-color: aqua;transition: transform 1s;
}.big-box {width: 500px;height: 500px;background-color: aqua;transition: transform 1s;
}.samll-box {width: 100px;height: 100px;background-color: aqua;transition: transform 1s;
}

打包结果

.box {width: 200px;height: 200px;background-color: aqua;transition: -webkit-transform 1s;transition: transform 1s;transition: transform 1s, -webkit-transform 1s;
}

这篇关于摇树优化之webpack(4.6.0) tree shaking的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/1013994

相关文章

Deepseek使用指南与提问优化策略方式

《Deepseek使用指南与提问优化策略方式》本文介绍了DeepSeek语义搜索引擎的核心功能、集成方法及优化提问策略,通过自然语言处理和机器学习提供精准搜索结果,适用于智能客服、知识库检索等领域... 目录序言1. DeepSeek 概述2. DeepSeek 的集成与使用2.1 DeepSeek API

Tomcat高效部署与性能优化方式

《Tomcat高效部署与性能优化方式》本文介绍了如何高效部署Tomcat并进行性能优化,以确保Web应用的稳定运行和高效响应,高效部署包括环境准备、安装Tomcat、配置Tomcat、部署应用和启动T... 目录Tomcat高效部署与性能优化一、引言二、Tomcat高效部署三、Tomcat性能优化总结Tom

解读Redis秒杀优化方案(阻塞队列+基于Stream流的消息队列)

《解读Redis秒杀优化方案(阻塞队列+基于Stream流的消息队列)》该文章介绍了使用Redis的阻塞队列和Stream流的消息队列来优化秒杀系统的方案,通过将秒杀流程拆分为两条流水线,使用Redi... 目录Redis秒杀优化方案(阻塞队列+Stream流的消息队列)什么是消息队列?消费者组的工作方式每

Oracle查询优化之高效实现仅查询前10条记录的方法与实践

《Oracle查询优化之高效实现仅查询前10条记录的方法与实践》:本文主要介绍Oracle查询优化之高效实现仅查询前10条记录的相关资料,包括使用ROWNUM、ROW_NUMBER()函数、FET... 目录1. 使用 ROWNUM 查询2. 使用 ROW_NUMBER() 函数3. 使用 FETCH FI

C#使用HttpClient进行Post请求出现超时问题的解决及优化

《C#使用HttpClient进行Post请求出现超时问题的解决及优化》最近我的控制台程序发现有时候总是出现请求超时等问题,通常好几分钟最多只有3-4个请求,在使用apipost发现并发10个5分钟也... 目录优化结论单例HttpClient连接池耗尽和并发并发异步最终优化后优化结论我直接上优化结论吧,

Java内存泄漏问题的排查、优化与最佳实践

《Java内存泄漏问题的排查、优化与最佳实践》在Java开发中,内存泄漏是一个常见且令人头疼的问题,内存泄漏指的是程序在运行过程中,已经不再使用的对象没有被及时释放,从而导致内存占用不断增加,最终... 目录引言1. 什么是内存泄漏?常见的内存泄漏情况2. 如何排查 Java 中的内存泄漏?2.1 使用 J

MySQL不使用子查询的原因及优化案例

《MySQL不使用子查询的原因及优化案例》对于mysql,不推荐使用子查询,效率太差,执行子查询时,MYSQL需要创建临时表,查询完毕后再删除这些临时表,所以,子查询的速度会受到一定的影响,本文给大家... 目录不推荐使用子查询和JOIN的原因解决方案优化案例案例1:查询所有有库存的商品信息案例2:使用EX

MySQL中my.ini文件的基础配置和优化配置方式

《MySQL中my.ini文件的基础配置和优化配置方式》文章讨论了数据库异步同步的优化思路,包括三个主要方面:幂等性、时序和延迟,作者还分享了MySQL配置文件的优化经验,并鼓励读者提供支持... 目录mysql my.ini文件的配置和优化配置优化思路MySQL配置文件优化总结MySQL my.ini文件

正则表达式高级应用与性能优化记录

《正则表达式高级应用与性能优化记录》本文介绍了正则表达式的高级应用和性能优化技巧,包括文本拆分、合并、XML/HTML解析、数据分析、以及性能优化方法,通过这些技巧,可以更高效地利用正则表达式进行复杂... 目录第6章:正则表达式的高级应用6.1 模式匹配与文本处理6.1.1 文本拆分6.1.2 文本合并6

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义