Webpack 4 打包优化之使用 SplitChunksPlugin-JavaScript中文网-JavaScript教程资源分享门户

Webpack 是一个强大的模块打包工具，但是在项目变得越来越复杂时，Webpack 的打包时间会变得非常慢。这会影响到开发者的开发效率以及整个项目的交付效率。因此，Webpack 提供了多种打包优化方案，其中之一是使用 SplitChunksPlugin。

SplitChunksPlugin 可以将 node_modules 目录下的第三方库和公共代码提取出来，形成一个单独的文件，从而加快打包速度并减小输出文件的大小。本文将详细介绍如何使用 SplitChunksPlugin 进行打包优化，并提供示例代码。

如何使用 SplitChunksPlugin？

安装 webpack 和 webpack-cli

首先需要安装 webpack 和 webpack-cli，可以使用以下命令进行安装：

npm install webpack webpack-cli --save-dev

创建 webpack 配置文件

在项目根目录下创建 webpack.config.js 文件，配置 webpack 相关设置。

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

配置 SplitChunksPlugin

修改 webpack 配置文件，在 optimization 属性下面添加 splitChunks 属性配置 SplitChunksPlugin。

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      name: 'vendors'
    }
  }
}

引入 SplitChunksPlugin

在 webpack 配置文件顶部引入 SplitChunksPlugin。

const path = require('path');
const SplitChunksPlugin = require('webpack/lib/optimize/SplitChunksPlugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      name: 'vendors'
    }
  },
  plugins: [
    new SplitChunksPlugin()
  ]
}

运行 webpack 打包命令

运行以下命令进行打包：

npx webpack

SplitChunksPlugin 参数解析

SplitChunksPlugin 提供了多个参数，其中比较重要的是 chunks 和 name。

chunks 参数用来确定哪些块需要被分离出去。它有以下选项：

initial 只适用于入口 chunk。
async 只适用于异步 chunk。
all 包括所有类型的 chunk。

name 参数用来指定提取出来的文件名。

示例代码

下面是一个示例代码，演示如何使用 SplitChunksPlugin 进行打包优化。

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Webpack Demo</title>
</head>
<body>
  <script src="vendors.js"></script>
  <script src="bundle.js"></script>
</body>
</html>

index.js

import axios from 'axios';
import _ from 'lodash';

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(_.groupBy(response.data, 'userId'));
  })
  .catch(error => {
    console.error(error);
  });

webpack.config.js

const path = require('path');
const SplitChunksPlugin = require('webpack/lib/optimize/SplitChunksPlugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      name: 'vendors'
    }
  },
  plugins: [
    new SplitChunksPlugin()
  ]
}

以上代码将 axios 和 lodash 从入口文件中提取出来，形成一个名为 vendors 的独立文件。

总结

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65c1bedbadd4f0e0ffbbfcfe