[toc] # Tree Shaking 樹搖：把項目中引入了但是沒有使用的代碼刪除掉【把樹上枯萎的葉子搖掉】。 ## 啟用 使用 Tree Shaking 的方法： 1. 使用 ES6 的模塊機制（import 和 export） 2. 在 package.json 文件中添加 `sideEffects` 屬性 3. 設置 mode 為 `production` ## 副作用 sideEffects ：會影響全局其他地方的代碼。 比如，在一個函數中有修改函數之外內容的代碼就是有副作用的： ~~~ // 這個函數中的代碼修改了函數外的東西，這個函數是有副作用的 function hello() { // 清空本地存儲（操作了函數之外的內容） localStorage.clear() } ~~~ ## sideEffects 屬性 webpack 在打包時會將沒有使用到的代碼刪除掉，但有一些代碼 webpack 無法判斷它是否被使用了，比如，引入一個樣式文件： ~~~ import './style.css' ~~~ 這個代表從表面上看引入了并沒有被使用，但實際上這個文件引入之后就會生效，但因為不是 JS 代碼，所以 webpack 無法判斷它是否被使用到了。 這時我們就需要在 `package.json` 文件中配置 `sideEffects` 屬性來指定哪些文件是有 “副作用” 的，然后這些文件在打包時不會因為樹搖而被識刪除。 ~~~json "sideEffects": [ "**/*.css", "**/*.scss", "./esnext/index.js", "./esnext/configure.js" ] ~~~