Webpack 教程

课程目标

1. 什么是Tree Shaking?
2. 为什么要使用Tree Shaking?
3. 配置
4. Tree Shaking的优点

一、什么是Tree Shaking?

当我们使用ES Module引入模块的时候，可能只引入了一部分，并没有全部引入。 但是打包的时候会把整个引入的文件全部打包。 为了只打包我们引入的部分，使用Tree Shaking，可以使你代码里没有使用的代码全部删除。

注意：Tree Shaking只支持静态引入的方法，所以只支持ES6引入的模块

二、为什么要使用Tree Shaking?

在 webpack 项目中，有一个入口文件，相当于一棵树的主干，入口文件有很多依赖的模块，相当于树枝。实际情况中，虽然依赖了某个模块，但其实只使用其中的某些功能。通过 tree-shaking，将没有使用的模块摇掉，这样来达到删除无用代码的目的， 主要还是为了减少页面的加载时间，将无用的代码删除，减少js包的大小，从而减少用户等待的时间，使用户不因为漫长的等待而离开。

三、配置

开发环境：

• 在webpack.config.js文件中进行配置，和plugins和entry同级添加optimization属性；在开发环境(mode:development)下使用Tree Shaking的配置如下：

devtool:'cheap-module-eval-source-map'
optimization：{
    usedExports:true
}

• 在package.json文件中配置

"sideEffects":false,
//代表Tree Shaking对所有的文件进行处理,没有要进行特别处理的

如果我想要对某文件进行特别处理可以采用: "sideEffects":[文件名]，比如：

"sideEffects":[@babel/polly-fill]; "sideEffects":['*.css']，遇到任何的css文件也不使用Tree Shaking

生产环境：

• webpack.config.js文件中不用配置 但需要修改devtool:

devtool:'cheap-module-source-map'，即可

• 只需要在package.js文件中配置

"sideEffects":false,

四、Tree Shaking的优点

1. 减少了页面的加载时间
2. 可以将无用的代码删除，减少js包的大小
3. 提高页面的性能，提高用户的体验感