webpack中Tree-Shaking性能优化

Tree-Shaking的作用

• Tree-shaking的本质是消除无用的js代码：在 webpack 项目中，当我们在入口文件中引入一个模块的时候，可能不会引入这个模块的所有代码，只引入了我们需要的代码，那么在使用webpack进行打包时，tree-shaking会自动帮我们把不用的代码过滤掉。
• 提升项目性能：JS绝大多数情况需要通过网络进行加载，然后执行，加载的文件越小，整体执行时间更短，所以去除无用代码以减少文件体积, 从而提升项目性能。

Tree-Shaking的模块引入方式

tree-shaking只支持ES模块的引入（import方式的引入），如果使用CommonJS的引入方法，tree-shaking是不支持的。因为CommonJS底层是动态引入的方式，import底层是静态引入的方式，tree-shaking只支持静态引入的方法，所以只支持ES模块引入。

// 正确的引入方式
import {
   
    add } from './math.js';
// 错误的引入方式 (tree shaking不支持)
// const add = require('./math.js');

Tree-Shaking的用法（配置）

目录结构：

|--demo
	|--node_modules
	|--src
		|--index.html
		|--index.js
		|--math.js
	|--package-lock.json
	|--package.json
	|--webpack.config.js

index.js

// 引入math.js模块中的一个方法
import {
   
    add } from './math.js';
add(1, 2);

math.js

// 导出两个方法
export const add = (a, b) => {
   
   
  console.log(a + b)
}