webpack4-Tree-Shaking优化

bawn 发布于2019-08-23 15:59 / 911人阅读

摘要：概念由来已久，今天再来谈一谈，是因为中有了新的优化。简单的介绍下什么是。它已经为我们消除了副作用。而且我并没有引入。即便根据文件大小，可能还有朋友持怀疑态度。因为最近才接触。所以没有在低版本的时候打包过。

Tree-Shaking概念由来已久，今天再来谈一谈，是因为webpack4中有了新的优化。
简单的介绍下什么是Tree-Shaking。

代码不会被执行

if(false) {
   do something
}

代码只写不读

这样的代码可以称之为dead code。再举个很简单的列子

a.js中
export function readCookie(){
    do something
}
export function createCookie(){
    do something
}

b.js中
import {readCookie} from "./a.js";
readCookie()

因为b中并没有import createCookie，故而在webpack打包的时候会将其标记为 unused harmony

最后在uglify阶段被删除掉。

现在是es6时代，所以大家都已经养成通过export 暴露方法，所以没啥好说的。

但一切都是建立没有副作用的基础上的，不了解的可以先看下这篇文
你的Tree-Shaking并没什么卵用

简单总结下，就是说如果暴露的方法，不是纯函数，可能有副作用（如参数是引用类型），那么在打包构建的过程中就不会被优化掉。
举个非常明显的例子。
阿里巴巴的 ant-design。

import { DatePicker } from "antd"; // 但是这样需要引入babel-plugin-import才能按需加载
import DatePicker from "antd/lib/DatePicker "; babel-plugin-importsg实际上就是把上面的写法构建成了下面的写法

antd里面实际上就是export所有的组件，但是没有引入的组件，因为副作用，不能删除，所以才有了按需加载的说法。

可随着webpack4.0的到来。它已经为我们消除了副作用。亲自测试了下。

采用import { DatePicker } from "antd" 引入的文件大小为1.18。
采用 import DatePicker from "antd/lib/date-picker"; 引入文件大小为1.23。有点点差别甚至还高了，但不纠结，我们只需要知道就是上面的引入方式根本就不会比下面的所谓的按需引入方式大。。而且我并没有引入babel-plugin-import。

即便根据文件大小，可能还有朋友持怀疑态度。那我还去打包后的代码里面截图下。

我搜索了Breadcrumb这个组件，但是没有搜索到。随后我import {DatePicker, Breadcrumb } from "antd";进来这个组件，并打包。

可以看见import之后，能够搜索到了。并且文件大小由1.18升到了1.19

好了。webpack4赶紧用起来。因为最近才接触ant-design。所以没有在webpack低版本的时候打包过ant-design。如果哪位兄弟还没升级的，可以回复下，看看在不按需加载ant-design的情况下，大概有多大。

如有错误，欢迎留言指正。

GPU云服务器云服务器网站优化搜索引擎优化 Web优化躬行记（5）——网站优化大陆优化优化论坛

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102609.html

[ 性能优化 ] 我们该优化什么？如何权衡？优化原则？ (2)

摘要：如何权衡优化优化原则优化的目的是希望降低程序的整体开销。虽然在程序中有许多因素可以优化，但通常人们会认为这个开销就是程序的执行时间，其实我们更应该将重点放在对程序整体开销最大的那个部分。性能是一个网站成功的关键，然而，如今日益丰富的内容和大量使用Ajax的Web应用程序已迫使浏览器达到其处理能力的极限，这就迫使我们需要一些技术来优化我们网站的性能！我相信已经有不少人看过了Yah...

hedzr 2019-08-21 10:30 评论0 收藏0
前端性能优化

摘要：端优谈谈关于前端的缓存的问题我们都知道对页面进行缓存能够有利于减少请求发送，从而达到对页面的优化。而作为一名有追求的前端，势必要力所能及地优化我们前端页面的性能。这种方式主要解决了浅谈前端中的过早优化问题过早优化是万恶之源。优化向：单页应用多路由预渲染指南 Ajax 技术的出现，让我们的 Web 应用能够在不刷新的状态下显示不同页面的内容，这就是单页应用。在一个单页应用中，往往只有一...

Dean 2019-08-21 18:19 评论0 收藏0
性能优化之MySQL调优篇

摘要：显示处于不可中断的休眠的进程数量。我们可以实用内存数据库，替代他的功能。 MySQL对于很多Linux从业者而言，是一个非常棘手的问题，多数情况都是因为对数据库出现问题的情况和处理思路不清晰。在进行MySQL的优化之前必须要了解的就是MySQL的查询过程，很多的查询优化工作实际上就是遵循一些原则让MySQL的优化器能够按照预想的合理方式运行而已。 showImg(https://seg...

NervosNetwork 2019-08-16 11:11 评论0 收藏0
Emscripten教程之优化你的代码

摘要：优化项也会引发一些问题。检查你的代码是否工作并修复问题。从起，及以上的优化级别默认启动了这项设置。目前正在进行改进。代码移植系列文章代码移植主题系列文章是中文站点的一部分内容。作者：云荒杯倾欢迎加入Wasm和emscripten技术交流群，群聊号码：939206522。这是关于Emscripten的系列文章，更多文章请看下面链接。 Emscripten代码移植系列文章 Emscr...

Jokcy 2019-08-22 11:08 评论0 收藏0