一、Tree shaking (搖樹優化)

Webpack打包中的tree shaking指的是通過靜態分析代碼引用關系，在構建時僅打包項目中實際使用到的代碼，從而將未使用過的代碼排除在構建產物之外，減小項目體積。

在Tree shaking過程中，Webpack會自動分析項目中每個模塊的引用關系，只有被引用過的模塊和代碼塊才會被打包到輸出文件中，未被引用的模塊和代碼塊則會被刪除，以減少輸出文件大小。這樣就可以標記和刪除沒有使用過的代碼，從而減小打包后文件的體積，提升網站性能。

值得注意的是tree shaking的必要條件之一為ES6模塊化，因為ES6模塊化中的代碼引用關系是明確的靜態分析關系，使得Webpack能夠方便地判斷哪些代碼需要被打包。而對于CommonJS模塊和AMD模塊，因引用關系不可確定，無法做到tree shaking。因此在開發時候應該遵循ES6模塊化的規范。

關于使用

這個功能我們不需要額外配置什么，webpack已經自動開啟了這個功能
這也是我們用webpakc構建項目的好處之一

二、babel編譯優化

babel會對ES6及以上的代碼進行轉譯成ES5的代碼，而ES5的代碼存在一些冗余的部分，也就是所謂的輔助代碼。因此會增加代碼的體積。

Babel 對一些公共方法使用了非常小的輔助代碼，比如 _extend。默認情況下會被添加到每一個需要它的文件中。

在babel的配置中關閉部分不必要的轉譯功能來減少代碼的體積。

什么是@babel/plugin-transform-runtime

@babel/plugin-transform-runtime是一個Babel插件，用于將Babel轉換代碼時使用的工具函數替換為較小的運行時版本，以減小打包后文件的體積。 這個插件使用了babel-runtime作為運行時的源模塊，而不是將其內聯到每個編譯后的模塊中。

使用@babel/plugin-transform-runtime可以避免重復的代碼并提供其他功能，如對內置對象的Polyfills支持。此外，它還可以避免污染全局命名空間，因為它將其所有依賴項都打包到一個單獨的模塊中。這使得它適用于任何類型的項目，包括library的構建。

使用

下載：

npm i @babel/plugin-transform-runtime -D

配置：

module.export = {
	module: {
		rules: [
			{
            test: /\.js$/,
            include: path.resolve(__dirname, "../src"), 
            use: [
              {
                loader: "babel-loader",
                options: {
                  plugins: ["@babel/plugin-transform-runtime"], // 減少代碼體積
                },
              },
            ],
          },
		]
	}
}