使用 Webpack 5 优化构建减少生成文件的体积提升前端性能

在使用 Webpack 5 时,优化构建以减少生成文件的体积是提升前端性能的重要一步。以下是一些常见的优化方法和策略:

1. 开启生产模式

确保构建时使用生产模式,Webpack 会自动应用多种优化(如代码压缩、Tree Shaking 等):

webpack --mode production

或在配置文件中明确设置:

module.exports = {
  mode: 'production',
};

2. 启用 Tree Shaking

Tree Shaking 是 Webpack 内置功能,用于删除未使用的代码。确保以下条件满足:

import { usedFunction } from './module';

在生产模式下,Webpack 会自动开启 Tree Shaking,无需额外配置。

3. 压缩 JavaScript 和 CSS

Webpack 5 内置了 TerserPlugin 来压缩 JavaScript:

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

压缩 CSS 时可以使用 css-minimizer-webpack-plugin

npm install css-minimizer-webpack-plugin --save-dev
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      '...',
      new CssMinimizerPlugin(),
    ],
  },
};

4. 分离第三方库(代码分割)

利用 Webpack 的 SplitChunksPlugin 将第三方库单独打包,避免重复加载:

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

通过动态导入(import())进一步减少初始加载文件:

// 动态导入模块,仅在需要时加载
import('./largeModule').then((module) => {
  module.default();
});

5. 移除未使用的 CSS

使用工具如 purgecss-webpack-plugin 删除未被使用的 CSS:

npm install purgecss-webpack-plugin glob --save-dev
const PurgeCSSPlugin = require('purgecss-webpack-plugin');
const path = require('path');

module.exports = {
  plugins: [
    new PurgeCSSPlugin({
      paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`, { nodir: true }),
    }),
  ],
};

6. 优化图片资源

使用 image-minimizer-webpack-plugin 来压缩图片:

npm install image-minimizer-webpack-plugin imagemin imagemin-mozjpeg imagemin-pngquant --save-dev
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

module.exports = {
  plugins: [
    new ImageMinimizerPlugin({
      minimizer: {
        implementation: ImageMinimizerPlugin.imageminGenerate,
        options: {
          plugins: [
            ['mozjpeg', { quality: 75 }],
            ['pngquant', { quality: [0.65, 0.9] }],
          ],
        },
      },
    }),
  ],
};

7. 减少 Polyfill 和第三方库体积

  • 按需引入:仅引入所需的模块,例如 lodash 使用 lodash-esbabel-plugin-lodash
  • 移除 Polyfill:现代浏览器环境下,不需要全部引入 core-js,可以使用 useBuiltIns: 'usage' 精确控制:
presets: [
  [
    '@babel/preset-env',
    {
      useBuiltIns: 'usage',
      corejs: 3,
    },
  ],
],

8. 使用 CDN

将常见的第三方库通过 CDN 加载,减少打包文件大小:

module.exports = {
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
  },
};

HTML 模板中加载:

<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>

9. 减少 source-map 大小

在生产模式中使用轻量级的 source-map,例如:

module.exports = {
  devtool: 'source-map',
};

对于极端情况,可以完全禁用:

module.exports = {
  devtool: false,
};

10. 使用 Bundle 分析工具

通过工具识别构建中的冗余依赖或大文件:

  • Webpack Bundle Analyzer:bash复制代码
npm install webpack-bundle-analyzer --save-dev
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  plugins: [new BundleAnalyzerPlugin()],
};

以上方法可以根据实际项目需求灵活组合使用。每次优化后可以通过分析工具评估效果,确保在降低文件体积的同时不影响功能和性能。

发布者:myrgd,转载请注明出处:https://www.object-c.cn/5080

Like (0)
Previous 2024年12月3日 下午9:28
Next 2024年12月3日 下午9:48

相关推荐

  • 在开发 Angular 项目时,使用 RangeSlider 控件时的常见问题

    在开发 Angular 项目时,使用 RangeSlider 控件时,可能会遇到一些常见的问题。以下是一些问题及其解决方案:1. 滑块值不更新问题描述:当用户拖动滑块时,滑块的值不会实时更新,或者显示的值不正确。解决方案:确保绑定的模型是双向绑定,使用 ngModel 或者监听 input 事件来确保滑块值能实时更新。例如: 确保你已经导入了 FormsMo…

    2024年11月27日
    00
  • pywebview 页面请求数据总是报错:TypeError: Cannot read properties of undefined (reading ‘api’)

    pywebview 中的 TypeError: Cannot read properties of undefined (reading ‘api’) 错误通常意味着 JavaScript 代码试图访问一个未定义的对象或属性(如 api)。这种问题通常出现在 Python 与前端 JavaScript 交互时,可能是由于以下原因:可能的原因及解决方法:Jav…

    2024年11月27日
    00
  • Solving the Makefile Missing Separator Stop Error in VSCode ……

    在 VSCode 中处理 Makefile 的 missing separator. Stop 错误,通常是因为 Makefile 中的命令行前没有用Tab 键缩进,而使用了空格。Makefile 规定,配方(recipe)中的每个命令行必须以Tab 键开头,而不是空格。 解决方法1. 检查 Makefile 的缩进打开报错的 Makefile 文件。找到出…

    2024年12月2日
    00
  • 在 uni-app 小程序中,使用 uni.getLocation 获取用户位置信息等

    在 uni-app 小程序 中,使用 uni.getLocation 获取用户位置后,可以通过 腾讯地图 API 将经纬度转化为详细的地址信息(如省、市、区、街道等)。以下是完整的操作流程: 1. 前置准备:开通腾讯地图 API 服务注册腾讯位置服务账号:登录 腾讯位置服务官网。创建项目并获取 Key:进入 控制台,创建新应用,选择 小程序。获取生成的 ke…

    2024年11月26日
    00
  • 远程访问 VMware ESXi 主机的方法

    远程访问 VMware ESXi 主机可以通过以下几种方式实现。具体方法取决于你的网络环境和目标需求,例如是否有公网 IP,是否需要加密传输等。以下是详细教程: 1. 基于公网 IP 的直接访问 1.1 适用场景 1.2 操作步骤 2. 使用 VPN 隧道访问 2.1 适用场景 2.2 操作步骤 3. 配置跳板机访问 3.1 适用场景 3.2 操作步骤 远程…

    2024年11月24日
    00
  • 使用 Python Selenium 控制 Chrome 浏览器 进行自动化操作

    使用 Python Selenium 控制 Chrome 浏览器 进行自动化操作是 Web 自动化测试和爬虫的常用方法之一。以下是一个完整的入门教程,包括如何安装、配置以及一些示例代码。 1. 安装所需环境 1.1 安装 Selenium 使用 pip 安装 Selenium: 1.2 下载 ChromeDriver 1.3 配置 ChromeDriver …

    2024年11月25日
    00
  • 基于 Spring Boot 框架实现微信支付接口调用及回调功能

    实现微信支付接口调用及回调功能,以下是完整的步骤及代码实现,基于 Spring Boot 框架。 1. 微信支付开发准备 开通微信支付 配置 API 安全密钥 前往商户平台的【账户设置】-【API安全】中配置 API 密钥。 2. 集成依赖 在 Spring Boot 项目中添加 HTTP 客户端依赖,例如 RestTemplate 或 OkHttp。也可用…

    2024年11月23日
    00
  • 在 Linux 系统上配置 Hadoop 环境,包括创建 hadoop 用户、更新 apt、安装 SSH 和配置 Java 环境

    以下是详细的步骤,用于在 Linux 系统上配置 Hadoop 环境,包括创建 hadoop 用户、更新 apt、安装 SSH 和配置 Java 环境。 1. 创建 Hadoop 用户创建一个名为 hadoop 的新用户: 根据提示设置密码和用户信息。 将 hadoop 用户添加到 sudo 组(可选): 切换到 hadoop 用户: 2. 更新 APT 包…

    2024年12月1日
    00
  • 微信小程序配置onShareTimeline分享到朋友圈的问题

    在微信小程序中使用 onShareTimeline 来实现分享到朋友圈的功能时,可能会遇到开发者工具中的功能灰色不可用或真机调试时无法分享的问题。下面是一些可能的原因和解决方法: 1. 检查小程序的分享功能是否已经启用 确保你在小程序的 app.json 或者页面的 json 配置文件中正确配置了分享功能。 在 app.json 或页面的 json 文件中添…

    2024年11月24日
    00
  • 在使用 uni-app 开发小程序或移动端应用时 title image失效问题

    在使用 uni-app 开发小程序或移动端应用时,若发现 分享的标题(title) 和 图片(image) 配置无效,可能是由于配置错误、平台限制或代码逻辑问题。以下是排查和解决问题的详细指南: 1. 确保正确使用分享 API onShareAppMessage(自定义转发) 确保在 pages 的页面代码中正确使用了 onShareAppMessage 方…

    2024年11月25日
    00
  • 部署 Harbor 时,如果运行 install 脚本报错可能导致问题的

    在部署 Harbor 时,如果运行 install 脚本报错,可能是网络问题导致的。以下是排查网络问题的方法: 1. 检查网络连通性 测试目标网络的连通性: 检查 DNS 配置: 如果解析失败,检查 /etc/resolv.conf 中的 DNS 配置,或者尝试手动指定公共 DNS,如 Google 的 8.8.8.8 或阿里云的 223.5.5.5。 2.…

    2024年12月9日
    00
  • 在 Vue3 和 uniapp 的 H5 环境中使用 QRCode.toDataURL() 生成二维码时无法显示的问题

    1. 图片格式或生成的 DataURL 处理问题QRCode.toDataURL() 方法通常会生成一个 Base64 编码的 PNG 图片。某些 Android 浏览器或 WebView 可能对 Base64 编码的图片支持不好,或者由于资源限制无法正常解析。解决方法:尝试通过生成二维码的图片 URL 直接展示而非使用 Base64 编码。可以通过将二维码…

    2024年11月27日
    00
  • 2024年最新的 Node.js 安装与环境配置教程

    以下是2024年最新的 Node.js 安装与环境配置教程,适用于 Windows、macOS 和 Linux 系统。 一、什么是 Node.js? Node.js 是一个基于 V8 引擎的 JavaScript 运行环境,主要用于开发服务端应用程序。它的特点是异步事件驱动和非阻塞 I/O,适合高性能应用。 二、Node.js 安装 1. 下载 Node.j…

    2024年11月23日
    00
  • 解决 Vue 3 应用部署到 GitHub Pages 后,遇到 404 错误问题

    在将 Vue 3 应用部署到 GitHub Pages 后,遇到 404 错误通常是由于 GitHub Pages 处理路由时的问题。Vue 3 使用 Vue Router 来管理前端路由,而 GitHub Pages 本身是静态托管服务,不支持处理 SPA(单页面应用)的客户端路由。因此,当你直接访问某个页面 URL(比如 https://youruser…

    2024年11月29日
    00
  • Jeewx-Api 1.3.1 发布:更简易的微信小程序开发 API 降低了开发成本

    Jeewx-Api 1.3.1 发布:更简易的微信小程序开发 API Jeewx-Api 是一款开源的微信开发 SDK,支持微信公众号、小程序、企业微信等全场景开发。1.3.1 版本针对小程序功能做了全面优化,为开发者提供了更简洁易用的 API,降低了开发成本。 1. 新版本亮点 支持微信小程序功能 更简洁的 API 支持企业微信与公众号 2. Jeewx-…

    2024年12月3日
    00

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们

在线咨询: QQ交谈

邮件:723923060@qq.com

关注微信