一、打包优化

1.1 问题：

一个模块导出几个工具方法，在另一个模块中引入其中的一个方法

  1. export const add = function () { console.log('add') }
  2. export const minus = function () { console.log('minus') }
  1. 另一个模块中，引用这个模块中的方法
import { add }  from 'utils.js'
add ();

**在打包时：会将**`**utils**`**中未引用的方法 **`**minus **`**也会进行打包，造成打包浪费：**

1.2 tree shaking

1.2.1 思想：

将使用的另一个模块中 未使用的 方法 ，打包时不处理，只处理模块中引用的方法
只支持 **ES Module** 规范；不支持 **CommonJS** 规范
image.png

1.2.2 ES_module 和 CommonJS规范

  1. import xxx from xxx 在加载模块时，首先去查找import引入，编译模块时就进行查找
  2. commonjs 执行到 require（xxx） 这个语句时，在进行引入
    const flag = true;
if (flag) {
 import xxx from xxx    // 报错，
}
    image.png
    image.png

    1.3 配置

    （1）optimization: { usedExports: true }
    "sideEffects": false 表示对每一个引入的进行检查
    image.png
    image.png

（2）"sideEffects": [ '' ]
表示 Tree Shaking 不需要去管 这些模块导入导出，打包时，一起打包
image.png

1.4 开启不开启打包区别：

1.4.1 未使用Tree shaking：

模块中未使用的方法，也进行了打包
注释：// exports provided: add, miinus,
image.png

1.4.2 使用Tree shaking：

注释：// exports provided: add, minus, // exports used:add; 多添加了一行，用户引用的方法；

注意1：

开发环境下：
webpack 打包时，分析出需要处理哪些未引用的方法，但是不会将其删除，因为在后期调试的过程中，会分析。
在production打包上线时，webpack会将未使用的引用给删除
image.png

注意2：

mode: 'production' 生产环境下，webpack默认开启Tree shaking
可以去掉：optimization配置项
devtool: 'cheap-module-source-map' 修改；
image.png
image.png