摇树优化之webpack（4.6.0） tree shaking

2024-05-29 16:08
文章标签 优化 tree webpack 4.6 shaking 摇树

本文主要是介绍摇树优化之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。

相关文章

uniapp接入微信小程序原生代码配置方案（优化版）

uniapp接入微信小程序原生代码配置方案（优化版）

uniapp项目需要把微信小程序原生语法的功能代码嵌套过来，无需把原生代码转换为uniapp，可以配置拷贝的方式集成过来 1、拷贝代码包到src目录 2、vue.config.js中配置原生代码包直接拷贝到编译目录中 3、pages.json中配置分包目录，原生入口组件的路径 4、manifest.json中配置分包，使用原生组件 5、需要把原生代码包里的页面修改成组件的方
阅读更多...
服务器雪崩的应对策略之----SQL优化

服务器雪崩的应对策略之----SQL优化

SQL语句的优化是数据库性能优化的重要方面，特别是在处理大规模数据或高频访问时。作为一个C++程序员，理解SQL优化不仅有助于编写高效的数据库操作代码，还能增强对系统性能瓶颈的整体把握。以下是详细的SQL语句优化技巧和策略： SQL优化 1. 选择合适的数据类型2. 使用索引3. 优化查询4. 范式化和反范式化5. 查询重写6. 使用缓存7. 优化数据库设计8. 分析和监控9. 调整配置1、
阅读更多...
Java中如何优化数据库查询性能？

Java中如何优化数据库查询性能？

Java中如何优化数据库查询性能？ 大家好，我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编，也是冬天不穿秋裤，天冷也要风度的程序猿！今天我们将深入探讨在Java中如何优化数据库查询性能，这是提升应用程序响应速度和用户体验的关键技术。 优化数据库查询性能的重要性 在现代应用开发中，数据库查询是最常见的操作之一。随着数据量的增加和业务复杂度的提升，数据库查询的性能优化显得尤为重
阅读更多...
打包体积分析和优化

打包体积分析和优化

webpack分析工具：webpack-bundle-analyzer 1. 通过<script src="./vue.js"></script>方式引入vue、vuex、vue-router等包（CDN） // webpack.config.jsif(process.env.NODE_ENV==='production') {module.exports = {devtool: 'none
阅读更多...
Clickhouse 的性能优化实践总结

Clickhouse 的性能优化实践总结

文章目录 前言性能优化的原则数据结构优化内存优化磁盘优化网络优化CPU优化查询优化数据迁移优化 前言 ClickHouse是一个性能很强的OLAP数据库，性能强是建立在专业运维之上的，需要专业运维人员依据不同的业务需求对ClickHouse进行有针对性的优化。同一批数据，在不同的业务下，查询性能可能出现两极分化。 性能优化的原则 在进行ClickHouse性能优化时，有几条
阅读更多...
群体优化算法---电磁共振优化算法(EROA)介绍包含示例滤波器设计

群体优化算法---电磁共振优化算法(EROA)介绍包含示例滤波器设计

介绍 电磁共振优化算法（Electromagnetic Resonance Optimization Algorithm, EROA）是一种新型的元启发式优化算法，其灵感来源于电磁共振现象。电磁共振是一种物理现象，当一个系统在特定频率下响应最大时，这个频率被称为共振频率。在优化算法中，共振频率可以用来引导搜索过程，提高优化效率 EROA 算法的基本原理 种群初始化： 在搜索空间内随机生成一定
阅读更多...
怎么优化ArcEngine组件开发mfc程序界面？

怎么优化ArcEngine组件开发mfc程序界面？

🏆本文收录于「Bug调优」专栏，主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案，希望能够助你一臂之力，帮你早日登顶实现财富自由🚀；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！ 问题描述   这种VS2015 + ArcEngine10.2开发的mfc小程序怎么优化界面，使系统看上去更美观 如上问题有来自我自身项目开发，有的收集网站
阅读更多...
SEO 优化注意事项

SEO 优化注意事项

一．站内优化 1.做好HTML头标签 标题（title）：标题是网页优化中相当有分量，一般网页title主要包含一些关键词、网站名称等。 关键词（keyword）：重要性大家都知道！关键词设定要参考热度、百度指数等一些手段，当然选择这些的前提要与自己网站的主题相关。关键词不宜多，一般就是1-3个。 描述（description）：主要是对网站的一个介绍，虽然没有前两个标签在搜索引擎
阅读更多...
从JavaScript 数组去重看兼容性问题，及性能优化（摘自玉伯博客）

从JavaScript 数组去重看兼容性问题，及性能优化（摘自玉伯博客）

缘由 JavaScript 数组去重经常出现在前端招聘的笔试题里，比如： 有数组 var arr = ['a', 'b', 'c', '1', 0, 'c', 1, '', 1, 0]，请用 JavaScript 实现去重函数 unqiue，使得 unique(arr) 返回 ['a', 'b', 'c', '1', 0, 1, ''] 作为笔试题，考点有二： 正确。别小看这个考点
阅读更多...
mysql中in参数过多该如何优化

mysql中in参数过多该如何优化

优化方式概述 未优化前 SELECT * FROM rb_product rb where sku in('1022044','1009786') 方案2示例 public static void main(String[] args) {//往list里面设置3000个值List<String> list = new ArrayList<>();for (int i = 0;
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2