前言
在前端开发过程中，我们通常会使用一些第三方库或者工具，这些工具大量引用的代码可能会让我们的应用变得臃肿，导致打包后的体积增大，而这又会直接影响应用的性能。为了解决这个问题，我们可以采取代码摇树（Tree Shaking）的方式，将没有用到的代码删掉。在这篇文章中，我将介绍如何使用 npm 包 webpack-common-shake 进行代码摇树。
webpack-common-shake 是什么
Webpack 是一个前端打包工具，而 webpack-common-shake 则是一个基于 webpack 的摇树工具，它可以帮助我们删除没有用到的代码，减小应用体积，提升应用性能。webpack-common-shake 支持 ES6 和 CommonJS 模块的摇树。
安装和使用
首先，我们需要在项目中安装 webpack 和 webpack-common-shake：
npm install webpack webpack-cli webpack-common-shake --save-dev
接下来，在项目根目录下创建一个名为 webpack.config.js 的配置文件，在该文件中添加以下内容：
-- -------------------- ---- -------
----- ----------------- - ---------------------------------------
-------------- - -
-- ----
------ -----------------
-- ----
------- -
--------- ------------
----- --------- - -------
--
-- ------
-------- -
--- -------------------
-
--然后，在 package.json 文件中添加以下代码：
"scripts": {
"build": "webpack --mode production"
},最后，在项目根目录下创建一个 src/index.js 文件，并在该文件中添加以下代码：
-- -------------------- ---- -------
-- -- -
------ -------- ------ -- -
------ - - --
-
-- -- -
------ -------- ----------- -- -
------ - - --
-
-- -- -
------ - --- - ---- -----------
------------------ ----
-- -- -
------ - -------- - ---- ----------------
----------------------- ----在同级目录下创建 add.js 和 subtract.js 文件，文件内容如下所示：
-- -------------------- ---- -------
-- ------
------ -------- ------ -- -
------ - - --
-
-- -----------
------ -------- ----------- -- -
------ - - --
-现在，我们运行以下命令进行打包：
npm run build
打包结束后，我们会在项目根目录下生成一个 dist 文件夹，该文件夹中包含一个 bundle.js 文件。我们来看一下该文件中的内容：
(()=>{"use strict";console.log(3),console.log(2)})();可以看到，文件中只有两行代码，分别是模块 3 和模块 4 中的 console.log 语句，这意味着通过 webpack-common-shake，我们成功地将没有用到的模块删除了。
总结
webpack-common-shake 是一个非常实用的工具，可以帮助我们减小前端应用的体积，提升应用的性能。在使用该工具时，我们需要注意以下几点：
- 确保安装 webpack 和 webpack-common-shake。
- 在 webpack 配置文件中引入 CommonShakePlugin。
- 将要摇树的模块 export 函数或者类。
- 注意 CommonJS 模块引入方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb487b5cbfe1ea06112de