webpack打包优化之减少代码体积(Tree shaking、babel)

一、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"], // 减少代码体积
                },
              },
            ],
          },
		]
	}
}