第4章 webpack優(yōu)化
webpack是一個(gè)打包工具，目的是進(jìn)行前端構(gòu)建的疼阔，也就是前端工程化戒劫，就有一個(gè)很重要的指標(biāo)：項(xiàng)目上線運(yùn)行的速度，打包耗費(fèi)的時(shí)間婆廊；所以webpack的優(yōu)化知識(shí)就凸顯的很重要迅细。
面試時(shí)，面試官會(huì)問：對(duì)webpack的理解淘邻？mode有幾種茵典？區(qū)別是什么？
一般開發(fā)工作中僅是使用webpack進(jìn)行項(xiàng)目構(gòu)建和打包宾舅，回答往往是分為生產(chǎn)和開發(fā)模式统阿，開發(fā)模式不會(huì)進(jìn)行代碼壓縮生產(chǎn)模式會(huì)壓縮代碼，大部分人都會(huì)這樣的回答贴浙，但是吸引面試官是知道除了代碼壓縮還做了其他什么事情砂吞，這才算了解production。
production模式打包自帶優(yōu)化
-
tree shaking
tree shaking 是一個(gè)術(shù)語崎溃，通常用于打包時(shí)移除 JavaScript 中的未引用的代碼(dead-code)蜻直，它依賴于 ES6 模塊系統(tǒng)中
import和export的靜態(tài)結(jié)構(gòu)特性。開發(fā)時(shí)引入一個(gè)模塊后，如果只使用其中一個(gè)功能概而，上線打包時(shí)只會(huì)把用到的功能打包進(jìn)bundle呼巷，其他沒用到的功能都不會(huì)打包進(jìn)來，可以實(shí)現(xiàn)最基礎(chǔ)的優(yōu)化
注意：
用require是不支持tree shaking的
正確的導(dǎo)入：import {add} from math.js
`import`和 `export`的**靜態(tài)結(jié)構(gòu)**特性赎瑰，就是要寫在頂級(jí)作用域
require是動(dòng)態(tài)導(dǎo)入王悍，是可以寫在局部作用域中，可以通過if判斷導(dǎo)入
-
scope hoisting（作用域提升）
scope hoisting的作用是將模塊之間的關(guān)系進(jìn)行結(jié)果推測餐曼， 可以讓 Webpack 打包出來的代碼文件更小压储、運(yùn)行的更快
scope hoisting 的實(shí)現(xiàn)原理其實(shí)很簡單：分析出模塊之間的依賴關(guān)系，盡可能的把打散的模塊合并到一個(gè)函數(shù)中去源譬，代碼更小集惋，加載更快，但前提是不能造成代碼冗余踩娘。
因此只有那些被引用了一次的模塊才能被合并刮刑。由于 scope hoisting 需要分析出模塊之間的依賴關(guān)系，因此源碼必須采用 ES6 模塊化語句养渴，不能使用require,不然它將無法生效雷绢。
原因和tree shaking一樣。類似于“預(yù)執(zhí)行”
-
代碼壓縮
所有代碼使用UglifyJsPlugin插件進(jìn)行壓縮理卑、混淆
