Tree Shaking 概念詳解
Tree Shaking指的是什麼？
打開項目進入index.js文件中，清空代碼，然後打包項目，不會報錯，但是實際上會報一個警告
在這個webpack版本下，如果在webpack.config.js配置了babel-loader的內容（我們已經將配置單獨放在babelrc文件裏），在preset-env中配置"useBuiltIns": "usage"這樣的配置參數，實際上之前的代碼不引入import '@babel/polyfill';也是一樣的，所以這個警告是告訴我們，用了"useBuiltIns": "usage"babel/polyfill 會自動的去引入，也就沒有必要在業務代碼裏去引入babel/polyfill了。
創建一個js文件，導出兩個方法：
export const add = (a, b) => {
console.log(a + b);
}
export const minus = (a, b) => {
console.log(a - b);
}
在index.js文件中引入import { add } from './math.js'
在index.js中調用add方法，add (1, 2);控制檯就輸出了 3 ，說明代碼正確運行
在index.js文件中，我們引入了math.js中的add方法，但是並沒有引入minus這個方法，但是打包生成的代碼main.js中，minus方法也被打包了，index.js雖然只引入了add這一個方法，但是卻把math裏所有的方法都打包了，這是沒有必要的，這樣的打包會使main.js文件很大，最好是根據業務代碼，按需打包，要實現這個功能，就使用Tree Shaking
Tree Shaking的含義是把一個模塊裏沒用的東西都搖晃掉。一個模塊可以理解爲一個文件，例如math.js，裏面會導出很多內容，當我們去引入這個樹的一部分，那麼引用的部分做打包，不引入的部分剔除掉，這就是tree shaking概念
在webpack中要想是現在tree shaking，該怎麼做呢，首先Tree Shaking只支持ES Moudule的引入，也就是支持import模塊的引入，如果使用const add = require('./math.js)這種Common JS的引入方式，那麼Tree Shaking是不支持的，這是因爲import這種ES Moudule的引入方式，它的底層是一個靜態引入的方式，而Common JS是一種動態引入的方式，Tree Shaking只支持靜態引入的方式。那麼Tree Shaking如何做配置呢？
在webpack.config.js文件中
在development模式當中，默認是沒有Tree Shaking這個功能的，要是想把它加上，要配置optimization
optimization: {
usedExports: true
}
usedExports顧名思義，哪些導出的模塊被使用了再做打包，在開發環境中配置Tree Shacking就可以了
接着，我們在package.json中寫一個配置項"sideEffects": false,
“sideEffects”: false,的意思是如果你配置了Tree Shaking，那麼webpack只要打包一個模塊就會運用Tree Shaking這種方式進行模塊打包，假如引入了import ‘@babel/polly-fill’，babel/polly-fill實際上並沒有導出任何內容，babel/polly-fill內部是在window對象上綁定了一些全局變量，並沒有直接導出模塊，但是假如用了Tree Shaking,發現沒有導出任何東西，那麼可能把babel/polly-fill打包的時候忽略掉了，那麼打包就會出錯，所以有的時候對這種文件要做特殊的設置，package.json的sideEffects就是做這樣的設置來使用的，如果我們不想要對@babel/polly-fill Tree Shaking ,那麼就在sideEffects寫一個數組，把@babel/polly-fill加上去。"sideEffects": ["@babel/polly-fill"]，那麼在打包的時候，Tree Shaking就不會對它有任何的作用。
"sideEffects": false,的意思是項目中不需要引用@babel/polly-fill這種包，沒有不需要做Tree Shaking的就需要這樣配置，Tree Shaking正常的對所有的模塊Tree Shaking。
一般來說需要配置sideEffects的有css樣式（import ‘./style.css’）
"sideEffects": ["
"*.css"
@babel/polly-fill"]
做好Tree Shaking的配置好再打包，我們發現minus方法依然存在，好像是沒有生效，其實已經生效了，在development環境下，不會直接在打包生成的main.js去除掉，它只是會在文件裏提示你
之所以是這樣的，是因爲開發環境生成的代碼還會做一些調試，如果Tree Shaking把一些代碼刪除掉的話，那麼在做調試的時候sourcemap對應的行數會錯了，所以開發環境下Tree Shaking還是會保留這些代碼，那如果代碼要打包上線，那要怎麼配置
把mode改爲production, devtool 改爲cheap-module-source-map
其實在production環境下，reeshaking自動的就寫好了一些配置，甚至不用寫optimization這個配置項，但是package.json下的sideEffects還是要配置一下的
這樣線上treeshaking就生效了