Webpack 4 打包优化之使用 SplitChunksPlugin

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

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

如何使用 SplitChunksPlugin？

  1. 安装 webpack 和 webpack-cli

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

--- ------- ------- ----------- ----------
  1. 创建 webpack 配置文件

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

----- ---- - ----------------

-------------- - -
  ------ -----------------
  ------- -
    --------- ------------
    ----- ----------------------- -------
  -
-
  1. 配置 SplitChunksPlugin

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

----- ---- - ----------------

-------------- - -
  ------ -----------------
  ------- -
    --------- ------------
    ----- ----------------------- -------
  --
  ------------- -
    ------------ -
      ------- ------
      ----- ---------
    -
  -
-
  1. 引入 SplitChunksPlugin

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

----- ---- - ----------------
----- ----------------- - --------------------------------------------------

-------------- - -
  ------ -----------------
  ------- -
    --------- ------------
    ----- ----------------------- -------
  --
  ------------- -
    ------------ -
      ------- ------
      ----- ---------
    -
  --
  -------- -
    --- -------------------
  -
-
  1. 运行 webpack 打包命令

运行以下命令进行打包：

--- -------

SplitChunksPlugin 参数解析

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

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

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

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

示例代码

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

index.html

--------- -----
------
------
  ----- ----------------
  -------------- ------------
-------
------
  ------- --------------------------
  ------- -------------------------
-------
-------

index.js

------ ----- ---- --------
------ - ---- ---------

-------------------------------------------------------
  -------------- -- -
    ------------------------------------ -----------
  --
  ------------ -- -
    ---------------------
  ---

webpack.config.js

----- ---- - ----------------
----- ----------------- - --------------------------------------------------

-------------- - -
  ------ -----------------
  ------- -
    --------- ------------
    ----- ----------------------- -------
  --
  ------------- -
    ------------ -
      ------- ------
      ----- ---------
    -
  --
  -------- -
    --- -------------------
  -
-

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

总结

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65c1bedbadd4f0e0ffbbfcfe

阅读全文

猜你喜欢

  • TypeScript 中 Union Type 类型判断国际惯例详解

    在前端开发中，类型判断是非常重要的一环。TypeScript 是一种在 JavaScript 基础上扩展的语言，提供了强类型检查和更好的代码提示功能。而其中的 Union Type 类型在类型判断中也...

    8 个月前
  • Koa2 使用 Puppeteer 来爬取数据

    前言 在前端开发中，经常需要从网站上获取数据，以供后续的数据处理和展示。而爬取数据是获取这些数据的一种常见方式。在本文中，我们将介绍如何使用 Koa2 和 Puppeteer 来爬取数据，并提供详细的...

    8 个月前
  • iOS 自带日期选择器 | React-Native

    React-Native 是一个流行的跨平台应用开发框架，它允许开发者使用 JavaScript 和 React 来构建 iOS 和 Android 应用。在 React-Native 中，我们可以使...

    8 个月前
  • Deno 中如何进行异步处理？

    异步处理的意义 在前端开发中，异步处理是非常重要的一个概念。它可以将一些长时间运行的操作放在后台执行，从而避免阻塞主线程，提高页面的响应速度和用户体验。 在 Deno 中，异步处理也是非常重要的。

    8 个月前
  • 使用 rollup 打包项目的一些问题及解决方法

    在前端开发中，项目打包是必不可少的一环，而 rollup 作为一款现代的 JavaScript 模块打包器，越来越受到开发者们的青睐。然而，在使用 rollup 进行项目打包时，也会遇到一些问题，本文...

    8 个月前
  • API 测试：利用 mocha 和 chai 对 API 的自动化测试进行详细分析

    在现代的应用程序中，API（Application Programming Interface）是一个至关重要的组件。API 允许不同的应用程序之间进行通信和交互，使得开发人员能够开发出更加复杂和功能...

    8 个月前
  • Jest 代码覆盖率统计总是不如实际，找到原因并解决

    在前端开发中，Jest 是一个非常流行的测试框架。其中一个重要的功能是代码覆盖率统计，可以帮助我们了解测试覆盖率，从而提高测试质量。但是，有时候我们会发现，Jest 的代码覆盖率统计总是不如实际。

    8 个月前
  • Material Design 库中 Snackbar 的使用技巧及遇到的问题解决方案

    前言 Snackbar 是 Material Design 库中的一个组件，用于在屏幕底部显示短暂的提示信息。它被广泛用于 Android 和 Web 应用程序中，因为它可以提供简洁、明确的反馈，同时...

    8 个月前
  • 如何在 Ruby on Rails 中使用 SSE 进行事件通知

    在现代的 Web 应用程序中，事件通知已经成为了必不可少的一部分。通过事件通知，我们可以让客户端实时地接收服务器端的数据变化，以便及时地响应用户的操作。而 SSE（Server-Sent Events...

    8 个月前
  • 解决 RESTful API 中 XML 格式数据的解析问题

    在前端开发中，经常需要通过 RESTful API 获取数据。其中，XML 是一种常见的数据格式，但是在解析 XML 数据时，会遇到一些问题。本文将介绍如何解决 RESTful API 中 XML 格...

    8 个月前
  • Fastify 应用中正确使用 MongoDB 的方法

    前言 在现代 Web 应用中，数据库是不可或缺的组成部分，它们是数据的存储和管理中心。MongoDB 是一种流行的 NoSQL 数据库，它在处理大量数据和高并发请求方面表现出色。

    8 个月前
  • ES6/ES7/ES8/ES9 中箭头函数与普通函数的区别及应用场景

    1. 箭头函数与普通函数的区别 1.1 箭头函数的语法 ES6 中引入了箭头函数的新语法，其语法如下： -------- ------- -- ------- -- - ---------- -其中，...

    8 个月前
  • Enzyme 对 React 组件 props 测试的实现方式及示例

    Enzyme 对 React 组件 props 测试的实现方式及示例 在前端开发中，React 组件是非常常见的一种代码组织方式。而对于组件的测试，我们需要测试组件的各种属性和状态，以确保组件的正确性...

    8 个月前
  • Vue + Webpack 项目打包优化方案实战详细教程

    前言 在前端开发中，我们经常使用 Vue 框架来构建 Web 应用程序。而在项目的构建和部署过程中，我们通常使用 Webpack 工具来进行打包。但是，在打包过程中，可能会出现一些性能问题，例如打包时...

    8 个月前
  • Mocha 测试中使用 istanbul 来生成代码覆盖率报告

    在前端开发中，测试是非常重要的一环。而代码覆盖率则是测试质量的重要指标之一。在 Mocha 测试中，我们可以使用 istanbul 工具来生成代码覆盖率报告，以便更好地了解测试的覆盖范围和测试质量。

    8 个月前
  • Sequelize 中的 Transaction 实现分析和使用

    前言 在开发过程中，事务是一个非常重要的概念。事务能够保证一组操作的原子性，即这组操作要么全部执行成功，要么全部执行失败。在数据库中，事务常常被用来保证数据的一致性和完整性。

    8 个月前
  • ES7 与 ES8 峰值动态显示数据，解决弹出框问题

    随着前端技术的不断发展，我们越来越需要处理大量数据。而传统的弹出框方式已经不能满足我们的需求，因为它会导致页面的加载速度变慢，用户体验变差。为了解决这个问题，ES7 和 ES8 推出了峰值动态显示数据...

    8 个月前
  • 使用 ES6 的 Spread 和 Rest 参数提高函数参数的灵活性

    在 JavaScript 中，函数是一种非常重要的编程结构。在编写函数时，我们通常需要定义参数以便传递数据。ES6 中引入了 Spread 和 Rest 参数，可以帮助我们提高函数参数的灵活性。

    8 个月前
  • 如何使用 LESS 和 BEM 命名规则构建更好的 Web 应用程序？

    在前端开发中，我们经常需要编写大量的 CSS 样式代码。但是，如果没有好的组织和命名规则，这些代码很容易变得混乱、难以维护。LESS 和 BEM 是两个非常实用的工具，可以帮助我们更好地组织和管理 C...

    8 个月前
  • Kubernetes 中如何进行负载均衡

    前言 在现代 Web 应用中，负载均衡是一个非常重要的组件。负载均衡可以帮助我们分配流量，确保应用程序的高可用性和可伸缩性。而在 Kubernetes 中，负载均衡也是一个非常重要的组件。

    8 个月前

相关推荐

    暂无文章