資訊專欄INFORMATION COLUMN
摘要：概念由來已久，今天再來談一談，是因為中有了新的優化。簡單的介紹下什么是。它已經為我們消除了副作用。而且我并沒有引入。即便根據文件大小，可能還有朋友持懷疑態度。因為最近才接觸。所以沒有在低版本的時候打包過。
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的情況下，大概有多大。
如有錯誤，歡迎留言指正。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102609.html
摘要：如何權衡優化優化原則優化的目的是希望降低程序的整體開銷。雖然在程序中有許多因素可以優化，但通常人們會認為這個開銷就是程序的執行時間，其實我們更應該將重點放在對程序整體開銷最大的那個部分。 性能是一個網站成功的關鍵，然而，如今日益豐富的內容和大量使用Ajax的Web應用程序已迫使瀏覽器達到其處理能力的極限，這就迫使我們需要一些技術來優化我們網站的性能！我相信已經有不少人看過了Yah...
摘要：顯示處于不可中斷的休眠的進程數量。我們可以實用內存數據庫，替代他的功能。 MySQL對于很多Linux從業者而言，是一個非常棘手的問題，多數情況都是因為對數據庫出現問題的情況和處理思路不清晰。在進行MySQL的優化之前必須要了解的就是MySQL的查詢過程，很多的查詢優化工作實際上就是遵循一些原則讓MySQL的優化器能夠按照預想的合理方式運行而已。 showImg(https://seg...
摘要：優化項也會引發一些問題。檢查你的代碼是否工作并修復問題。從起，及以上的優化級別默認啟動了這項設置。目前正在進行改進。代碼移植系列文章代碼移植主題系列文章是中文站點的一部分內容。 作者：云荒杯傾歡迎加入Wasm和emscripten技術交流群，群聊號碼：939206522。 這是關于Emscripten的系列文章，更多文章請看下面鏈接。 Emscripten代碼移植系列文章 Emscr...
閱讀 2331·2021-11-24 10:27
閱讀 3576·2019-08-30 15:55
閱讀 3340·2019-08-30 15:53
閱讀 2342·2019-08-29 17:27
閱讀 1427·2019-08-26 13:47
閱讀 3547·2019-08-26 10:28
閱讀 913·2019-08-23 15:59
閱讀 2850·2019-08-23 15:19
