随着前端开发中越来越多的功能和复杂性，在打包部署过程中，可能会遇到一些性能方面的问题，比如打包速度慢、打包体积过大等。所以在选择 Webpack 插件来优化打包体积时，我们需要考虑多个因素。
1. 确认问题
首先我们需要明确打包问题的根本原因，是因为编译文件过多导致的？还是因为打包后的文件过大导致的？或者是其他原因？只有明确了问题，才能有针对性的进行优化。
2. 选择合适的插件
选择插件的过程中要根据问题具体选择，通常我们会选择以下几个插件：
1. Babel
Babel 可以将 ES6/ES7/ES8 代码转换为 ES5 代码，从而保证代码的兼容性和可读性。而且 Babel 还有一个非常重要的功能，就是将需要 Polyfill 的特性打包进我们的项目中。打包的时候，可以通过配置 @babel/preset-env 来实现精确的浏览器支持范围，避免不必要的冗余代码。
安装 Babel：npm install --save-dev babel-loader @babel/core @babel/preset-env
2. Uglifyjs
Uglifyjs 可以将打包文件的代码进行压缩和混淆，从而使得打包后的体积更小，同时也保护了我们的代码。
安装 Uglifyjs：npm install --save-dev uglifyjs-webpack-plugin
3. Tree shaking
Tree shaking 指的是一种只打包项目中实际使用到的代码的方式，通过将 JS 代码进行静态分析，找出并删除没有被引用到的代码，从而能够减少打包后的文件大小。
由于 Webpack4 已经默认支持 Tree shaking，所以我们可以在配置文件中开启此功能：
optimization: {
// 开启 Tree shaking
usedExports: true
}4. Scope hoisting
Scope hoisting 是指将多个模块的代码合并到一个函数中去，再进行压缩和混淆。这个插件需要通过 ModuleConcatenationPlugin 进行开启。
安装 Scope hoisting：npm install --save-dev webpack-concat-plugin
-- -------------------- ---- -------
-- -----------------
----- ------------------------- - ----------------------------------------------------------
-------------- - -
--------
-------- -
--- ---------------------------
-
--3. 实践示例
为了更好的理解如何选择插件来优化打包体积，我们一起来看一下下面的实践示例：
1. 安装 Babel 和 Uglifyjs 插件
npm install --save-dev babel-loader @babel/core @babel/preset-env uglifyjs-webpack-plugin
创建 .babelrc 文件并配置如下：
{
"presets": [
"@babel/preset-env"
]
}配置 Webpack.config.js 文件：
-- -------------------- ---- -------
----- ---- - ----------------
----- -------------- - -----------------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- ---------
--
------- -
------ --
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
--
--
-------- -
--- ----------------
-
--2. 开启 Tree shaking 和 Scope hoisting
安装 Scope hoisting 插件：npm install --save-dev webpack-concat-plugin
在 Webpack.config.js 文件中开启 Tree shaking 和 Scope hoisting：
-- -------------------- ---- -------
----- ---- - ----------------
----- -------------- - -----------------------------------
----- ------------------------- - ----------------------------------------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- ---------
--
------- -
------ --
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
--
--
------------- -
-- -- ---- -------
------------ ----
--
-------- -
--- -----------------
-- -- ----- --------
--- ---------------------------
-
--3. 结论
通过实践示例我们可以得出，我们可以根据自己的需求选择合适的插件来优化打包体积，同时我们也可以通过开启 Tree shaking 和 Scope hoisting 来进行进一步的优化，从而提高项目的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6747abb8555db9718d161155