返回

绝妙的 webpack4实战攻略 - 二

前端

引言
如今的 JavaScript 应用程序规模不断膨胀，造成加载时间长和内存占用大的问题。为了解决这些问题，webpack4 中引入了一个叫做 Tree Shaking 的新特性。这个特性可以分析你的代码，并移除所有未被使用的代码。这可以显著地减小你的应用程序的体积，并提高其性能。

实战示例

为了更详细地说明如何使用 Tree Shaking，让我们创建一个简单的 webpack4 项目。
首先，我们创建一个 package.json 文件，并安装 webpack4 和其他必要的依赖项：

npm init -y
npm install webpack webpack-cli --save-dev

然后，我们创建一个 index.js 文件，并添加以下代码：

// index.js
import { a } from './moduleA';
import { b } from './moduleB';

console.log(a());
console.log(b());

最后，我们创建一个 webpack.config.js 文件，并添加以下配置：

// webpack.config.js
module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  }
};

现在，我们可以运行 webpack 命令来打包我们的代码：

npx webpack

在打包完成后，你会发现 dist 目录下生成了一个 bundle.js 文件。这个文件就是打包后的代码。如果你打开这个文件，你会看到以下代码：

(function(modules) { // webpackBootstrap
  ...
  modules["./index.js"] = (function() {
    var __webpack_module_api__ = ...;
    ...
    console.log(a());
    console.log(b());
    ...
    return __webpack_module_api__.exports;
  })();
  ...
})(模块映射表);

从上面我们可以看到，打包后的代码包含了我们所有的代码，包括一些未被使用的代码。为了使用 Tree Shaking，我们需要在 webpack.config.js 文件中添加以下配置：

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

再次运行 webpack 命令打包后，你会发现 bundle.js 文件变小了很多。这是因为 Tree Shaking 已经移除了所有未被使用的代码。

结论

Tree Shaking 是一个非常强大的功能，可以显著地减小你的应用程序的体积，并提高其性能。如果你正在使用 webpack4，强烈建议你使用 Tree Shaking 来优化你的代码。