webpack Tree Shaking 功能

tree-shaking 只支持 Es Module 这种静态引入的方法，不支持 AMD、CMD 这种动态的引入，即它只支持 import 的形式引入，不支持 require 的形式引入

1、未使用 tree shaking 功能打包时，会将所有引用模块的全部代码引入

• a、入口文件 main.js

/**
 * 只引入 './assets/js/math' 模块的 add 功能
 */
import { add } from './assets/js/math'
add(5, 6)

• b、引用模块 math.js

/**
 * 存在两个功能 add、decrease
 */

export const add = (a, b) => {
  console.log(a + b)
  return a + b
}

export const decrease = (a, b) => {
  console.log(a - b)
  return a - b
}

• c、打包后文件

  
  image.png

2、tree shaking 的作用

打包项目时，只打包被引用模块的被引用功能代码，而不是全部打包到最终打包文件上，该功能大大减少了最终打包文件的体积，避免了冗余代码的产生

3、使用方法

• a、当 mode 为 development 时，默认是没有开启 tree-shaking 功能的;mode 为 production 时，会自动开启 tree-shaking 功能，无需额外配置,但是 package.json 文件的配置还是要的

module.exports = {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map'
}

或者

module.exports = {
  mode: 'production',
  /**
   * mode: 'production'时
   * 将devtool配置为不要带有 eval 的，使用 none 也行
   * 才能使打包的冗余代码去除
   */
  devtool: 'cheap-module-source-map'
}

• b、配置 optimization 配置项

module.exports = {
  optimization: {
    usedExports: true
  }
}

• c、配置 package.json 文件

{
  /**
   * 该设置是针对于像 @babel/polyfill 等类型的文件做额外处理的
   * 这类文件没有导出任何功能，只是在 window 对象中绑定了一些全局变量
   * 为避免打包时 tree-shaking 会忽略掉这类文件，因此需要该设置
   * sideEffects 为 false 时，表示 tree-shaking 只打包有导出某些功能且被引用的模块
   * css/less/scss 文件一般也是没有导出任何功能的模块文件
   */
  "sideEffects":[
    "@babel/polyfill",
    "*.css",
    "*.less",
    "*.scss"
  ],
}