Webpack 4 代码分离：开箱即用

2023-12-15 12:34:25

Webpack 4 体验报告：开箱即用的代码分离

背景

Webpack 是一个流行的 JavaScript 模块打包工具，它可以将各种模块（例如 JavaScript、CSS）捆绑到一个或多个输出文件中。在 Webpack 4 中，代码分离得到了改进，可以使用内建的“优化”功能轻松实现。

引言

作为一名经验丰富的开发者，我迫不及待地想要尝试 Webpack 4 中的新特性。在这篇博客中，我将分享我的使用体验，并通过一个实际示例展示如何利用代码分离功能。

代码分离

代码分离允许将公共代码提取到一个或多个单独的文件中，从而减少加载时间和提高应用程序性能。在 Webpack 4 之前，这是通过 CommonsChunkPlugin 插件实现的。然而，Webpack 4 内置了类似的功能，并将其命名为“优化”。

使用优化功能

要使用优化功能，只需在 webpack.config.js 文件中添加以下代码：

optimization: {
  splitChunks: {
    cacheGroups: {
      commons: {
        test: /[\\/]node_modules[\\/]/,
        name: 'commons',
        chunks: 'all'
      }
    }
  }
}

这段代码将自动将所有来自 node_modules 文件夹的代码提取到名为 commons.js 的单独文件。

实例

为了演示代码分离功能，我创建了一个简单的 React 应用程序。这个应用程序包含多个组件，每个组件都包含自己的依赖项。

// App.js
import React, { useState } from 'react';
import Component1 from './Component1';
import Component2 from './Component2';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <Component1 count={count} />
      <Component2 count={count} />
    </div>
  );
}

export default App;

// Component1.js
import React from 'react';

function Component1({ count }) {
  return (
    <div>
      Component 1: {count}
    </div>
  );
}

export default Component1;

// Component2.js
import React from 'react';

function Component2({ count }) {
  return (
    <div>
      Component 2: {count}
    </div>
  );
}

export default Component2;