webpack优化代码运行之Code split

news2024/11/15 12:27:25

一、 什么是code split

Webpack的code split是一种技术，它能够将代码分割成多个块，从而优化应用程序的性能。这样做可以实现按需加载和并行加载，从而减少初始化时间和请求次数。Code split在Webpack中通过使用entry语法和各种Loader和插件来实现，可以将代码分割成多个文件，然后在需要时加载它们。它可以适用于任何类型和大小的应用程序，尤其适合大型单页应用和跨页面共享代码的应用程序。

二、code split 打包多入口文件

webpack的code split可以通过在webpack.config.js配置文件中设置entry和output来实现。entry指定入口文件，可以通过设置多个entry来实现code split。output则指定输出文件名和输出目录。

例如，我们可以在webpack.config.js中设置多个entry，如下所示：

entry: {
  app: './src/app.js',
  vendor: ['react', 'react-dom', 'lodash'],
  polyfills: './src/polyfills.js'
},

其中，app是我们应用程序的入口，vendor包含了我们使用的第三方库，polyfills包含了需要兼容旧浏览器的代码。

接着，在output中，我们可以使用占位符来设置文件名：

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].[chunkhash].js'
}

其中，name指entry的键名，chunkhash表示根据文件内容生成的哈希字符串，可以保证文件名的唯一性。

最终，我们的应用程序会被分成多个小的JavaScript文件，例如：

  • app.1a2b3c.js
  • vendor.4d5e6f.js
  • polyfills.7g8h9i.js

这样可以有效地缩短页面加载时间和提高应用程序的性能。

三、code split 提取公共代码

Webpack的Code Split技术可以帮助我们提取公共代码，减少页面的加载时间，提高页面的性能。下面我举一个例子来说明如何使用Webpack的Code Split技术提取公共代码。

假设我们有一个应用程序，其中包含两个页面：首页和用户页面。我们想要提取公共代码以减少页面的下载时间。为此，我们可以使用Webpack的多个入口特性，其中每个入口都是一个单独的JavaScript文件。

首先，在我们的Webpack配置文件中，定义两个入口文件，如下所示：

entry: {
  home: './src/home.js',
  user: './src/user.js'
}

然后，我们可以在每个入口文件中使用Webpack的动态导入技术来加载共享模块。这里，我们使用import()函数来导入一个包含公共代码的JavaScript文件：

// home.js
import(/* webpackChunkName: "common" */ './common.js').then(common => {
  console.log(common.foo());
});

// user.js
import(/* webpackChunkName: "common" */ './common.js').then(common => {
  console.log(common.bar());
});

在这里，我们使用了webpackChunkName选项来给加载的公共代码 chunk 命名（这里命名为 common）。这个命名选项对代码拆分起着重要的作用，因为它使得Webpack可以创建一个独立的chunk包，其中包含所有的公共模块。

最后，我们需要在Webpack的配置文件（比如output选项中）中配置Chunk文件的输出路径和名称。我们可以使用Webpack的[name]变量来指定Chunk文件的名称，如下所示：

output: {
  filename: '[name].[chunkhash].js',
  chunkFilename: '[name].[chunkhash].js',
  ...
}

在这里，我们配置了Webpack的输出路径和文件名，使用[name]变量来指定Chunk的名称。这意味着，生成的Chunk文件分别为home.common.js和user.common.js（如果我们在之前的代码中使用了不同的名称，则Chunk文件的名称也相应发生更改）。

通过这种方式，我们可以在Webpack中实现Code Split技术，将公共模块提取出来并将它们放在一个独立的Chunk文件中，从而提高页面性能和用户体验。

四. code split 实现按需加载

Webpack的Code Split技术可以将一个大型的应用程序代码拆分成更小的代码块，以便按需加载。这样可以提高应用程序的性能和用户体验，因为只有在需要时才会加载所需的代码。以下是实现按需加载的步骤：

  1. 定义入口文件和输出文件

在webpack配置文件中，需要定义应用程序的入口文件和输出文件。例如，定义入口文件为app.js，输出文件为bundle.js。

entry: {
  app: './app.js'
},
output: {
  filename: 'bundle.js'
}
  1. 使用webpack的splitChunks配置项

使用webpack的splitChunks配置项来将应用程序代码拆分成更小的代码块。可以根据模块的大小、共享依赖项或按需加载等条件来进行拆分。例如，使用以下配置将共享依赖项打包到一个名为vendors的代码块中。

optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all'
      }
    }
  }
}
  1. 在应用程序中按需加载代码

可以使用webpack的动态import语法来按需加载代码块。例如，以下代码将异步加载名为lazyModule的代码块。

import('./lazyModule')
  .then(module => {
    // 模块加载完成后的操作
  })
  .catch(error => {
    // 模块加载失败的处理
  });

举例说明：

假设我们有一个应用程序，其中包含三个页面，每个页面都有自己的代码。我们可以将代码拆分成三个代码块，以便按需加载。每个页面的代码可以使用动态import语法按需加载。

entry: {
  home: './home.js',
  about: './about.js',
  contact: './contact.js'
},
output: {
  filename: '[name].bundle.js',
  path: __dirname + '/dist'
},
optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all'
      }
    }
  }
}

现在，在我们的应用程序中，可以使用动态import语法来按需加载每个页面的代码。

// 加载home页面代码
import('./home')
  .then(module => {
    // 模块加载完成后的操作
  })
  .catch(error => {
    // 模块加载失败的处理
  });

// 加载about页面代码
import('./about')
  .then(module => {
    // 模块加载完成后的操作
  })
  .catch(error => {
    // 模块加载失败的处理
  });

// 加载contact页面代码
import('./contact')
  .then(module => {
    // 模块加载完成后的操作
  })
  .catch(error => {
    // 模块加载失败的处理
  });

通过按需加载，我们可以提高页面加载速度和用户体验。只有在需要时才会加载代码，这可以减少初始加载时间和带宽消耗。

五、按需加载eslint校验报错解决方案

如图：
在这里插入图片描述
在编译时，eslint会校验import语法

解决方案1：

  1. 下载

npm i eslint-plugin-import -D

  1. 配置.eslintrc.js

plugins: [“import”]

  • eslintrc.js
module.exports = {
 // 继承 Eslint 规则
 extends: ["eslint:recommended"],
 env: {
   node: true, // 启用node中全局变量
   browser: true, // 启用浏览器中全局变量
 },
 plugins: ["import"], // 解决动态导入import语法报错问题 --> 实际使用eslint-plugin-import的规则解决的
 parserOptions: {
   ecmaVersion: 6,
   sourceType: "module",
 },
 rules: {
   "no-var": 2, // 不能使用 var 定义变量
 },
};

解决方案2：
可以在package.json文件中加上如下配置

  • package.json
"eslintConfig": {
    "parser": "babel-eslint",// 解析器，默认使用Espree
    "parserOptions": {
      "sourceType": "module", // 指定来源的类型，"script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)
      "allowImportExportEverywhere": true // 不限制eslint对import使用位置
    }
  },

我后面更改打包文件名时报了个错,在这里记录一下
在这里插入图片描述
这个就是webpack版本不匹配导致的，我现在的版本是5.85.1
然后我降到5.72.0就好了

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/658624.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

享元模式：减少内存占用的诀窍

享元模式：减少内存占用的诀窍

一，概要 享元模式（Flyweight Pattern）是一种结构型设计模式，它主要通过共享对象来降低系统中对象的数量，从而减少内存占用和提高程序性能。这听起来有点像单例模式，但它们在实现和用途上有很大的区别。享元…
阅读更多...
JavaScript Day01 初识JavaScript

JavaScript Day01 初识JavaScript

文章目录 1.初识JavaScript1.1.什么是JavaScript1.2.JavaScript的组成部分1.3.JavaScript的历史-JavaScript发展历史-系统环境-编辑器-运行环境-调试： 2. js组成2.1 ECMAScrpt 【js标准】（兼容性100%） (类似于CoreJava，制定了基础…
阅读更多...
【备战秋招】每日一题:2023.05-B卷-华为OD机试 - 阿里巴巴找黄金宝箱(III)

【备战秋招】每日一题:2023.05-B卷-华为OD机试 - 阿里巴巴找黄金宝箱(III)

为了更好的阅读体检，可以查看我的算法学习博客阿里巴巴找黄金宝箱(III) 题目描述 贫如洗的樵夫阿里巴巴在去砍柴的路上，无意中发现了强盗集团的藏宝地，藏宝地有编号从0-N的箱子，每个箱子上面贴有一个数字。 阿里巴巴念出一个咒…
阅读更多...
SpringMVC 学习整理

SpringMVC 学习整理

文章目录 一、SpringMVC 简介1.1 什么是MVC1.2 什么是Spring MVC1.3 Spring MVC的特点 二、SpringMVC 快速入门三、RequestMapping注解说明四、SpringMVC获取请求参数4.1 通过ServletAPI获取请求参数4.2 通过控制器方法的形参获取请求参数4.3 通过RequestParam接收请求参数4.4 …
阅读更多...
Elasticsearch：实用 BM25 - 第 3 部分：在 Elasticsearch 中选择 b 和 k1 的注意事项

Elasticsearch：实用 BM25 - 第 3 部分：在 Elasticsearch 中选择 b 和 k1 的注意事项

这是系列文章的第三篇文章。之前的文章是： Elasticsearch：实用 BM25 - 第 1 部分：分片如何影响 Elasticsearch 中的相关性评分 Elasticsearch：实用 BM25 - 第 2 部分：BM25 算法及其变量 选择 b 和 k1 值得注意的是&…
阅读更多...
【备战秋招】每日一题:2023.05-B卷-华为OD机试 - 比赛的冠亚季军

【备战秋招】每日一题:2023.05-B卷-华为OD机试 - 比赛的冠亚季军

为了更好的阅读体检，可以查看我的算法学习博客比赛的冠亚季军 题目描述 有个运动员，他们的id为0到N-1,他们的实力由一组整数表示。他们之间进行比赛，需要决出冠亚军。比赛的规则是0号和1号比赛，2号和3号比赛，以此类推…
阅读更多...
014、数据库管理之配置管理

014、数据库管理之配置管理

配置管理 TiDB配置系统配置集群配置配置的存储位置区分TiDB的系统参数和集群参数 系统参数系统参数的作用域系统参数的修改 集群参数集群参数的修改配置参数的查看 实验一： 在不同作用域下对数据库的系统参数进行修改session级别global级别 实验二： 修改…
阅读更多...
Redis入门(二)

Redis入门(二)

3.7 Redis 默认16个库 1）Redis默认创建16个库,每个库对应一个下标,从0开始. 通过客户端连接后默认进入到0 号库，推荐只使用0号库. 127.0.0.1:6379> 16个是因为配置文件中是这样的 [aahadoop102 redis]$ vim redis.conf 2）使用命令 sele…
阅读更多...
DataX和SQLServer的导入导出案例

DataX和SQLServer的导入导出案例

DataX和SQLServer的导入导出案例 文章目录 DataX和SQLServer的导入导出案例写在前面SQLServer数据库的简单使用SQLServer数据库一些常用的Shell脚本命令创建数据库 DataX 导入导出案例创建表并插入数据读取 SQLServer 的数据导入到 HDFS读取 SQLServer 的数据导入 MySQL 总结 写…
阅读更多...
【C++Coppeliasim】UR机械臂位置正逆解Coppeliasim集成测试

【C++Coppeliasim】UR机械臂位置正逆解Coppeliasim集成测试

前言： 基于改进的 Denavit-Hartenberg 参数的UR机械臂正向运动学求解和基于几何分析的逆运动学求解。该代码在 C 和 MATLAB 中可用，两者都与 CoppeliaSim 集成。 该解决方案是使用 Microsoft Visual Studio 2022 和 C 20 标准构建的。 依赖： …
阅读更多...
C++ 类继承

C++ 类继承

目录 类继承基类派生一个类构造函数访问权限派生类与基类之间的特殊关系 完整demo 类继承 基类 #ifndef __TEST_1_H_ #define __TEST_1_H_ #include <iostream> #include<string> using namespace std; typedef unsigned int uint;//father class class TableTen…
阅读更多...
《编译原理》2022年期末试卷

《编译原理》2022年期末试卷

北京信息科技大学《编译原理》2022年期末考试 试卷附录
阅读更多...
双指针-链表相交

双指针-链表相交

面试题 02.07. 链表相交 同&#xff1a;160.链表相交 力扣题目链接 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表没有交点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 题目数据 保…
阅读更多...
用c语言查找交通肇事者。

用c语言查找交通肇事者。

问题&#xff1a; 一辆卡车违反交通规则&#xff0c;撞人后逃跑。现场有3人目击事件&#xff0c;但都没有记住车号&#xff0c; 只记下车号的一些特征。 甲说&#xff1a;“牌照的前两位数字是相同的”。 乙说&#xff1a;“牌照的后两位…
阅读更多...
如何高效阅读源码

如何高效阅读源码

最近在研究一款开源软件&#xff0c;从初步上手使用到源码分析&#xff0c;依靠看源码解决问题&#xff0c;可以说让自己在阅读源码能力上有了一点小的成长。鲁迅先生曾没说过&#xff0c;“源码是最好的文档”&#xff0c;他还没说过&#xff0c;“带着问题阅读源码最有效”。…
阅读更多...
bat脚本添加以管理员权限执行方法

bat脚本添加以管理员权限执行方法

在windows上运行bat脚本的时候&#xff0c;有时候&#xff0c;会因为权限问题导致操作失败&#xff0c;这时候&#xff0c;需要在脚本中提升权限&#xff0c;以管理员权限执行脚本命令。 现在介绍两种方法可以实现管理员权限执行&#xff0c;如下所示&#xff0c;是一段以管理员…
阅读更多...
【C++】STL的list容器介绍

【C++】STL的list容器介绍

目录 6、list容器 6.1list构造函数 6.2list赋值和交换 6.3list大小操作 6.4list插入 6.5list删除 6.6list数据存取 6.7list反转和排序 6、list容器 list本质是带头节点的双向循环链表&#xff0c;链表&#xff08;list&#xff09;是一种物理存储单元上非连续的存储结…
阅读更多...
学生必看！免费领取一台阿里云服务器

学生必看！免费领取一台阿里云服务器

阿里云学生服务器优惠活动&#xff1a;高效计划&#xff0c;可以免费领取一台阿里云服务器&#xff0c;如果你是一名高校学生&#xff0c;想搭建一个linux学习环境、git代码托管服务器&#xff0c;或者创建个人博客网站记录自己的学习成长历程&#xff0c;拥有一台云服务器是很…
阅读更多...
Redis 批处理优化

Redis 批处理优化

一、优化建议 1、使用Pipeline Redis 的 Pipeline 可以将多个命令打包成一个请求&#xff0c;从而减少通信次数和网络开销。在批处理时&#xff0c;可以使用 Pipeline 来提高效率。 2、使用批量插入 Redis 支持批量插入&#xff0c;可以将多个数据一次性插入数据库&#xf…
阅读更多...
一文看完Vue3的渲染过程

一文看完Vue3的渲染过程

Vue3官网中有下面这样一张图&#xff0c;基本展现出了Vue3的渲染原理&#xff1a; 本文会从源码角度来草率的看一下Vue3的运行全流程&#xff0c;旨在加深对上图的理解&#xff0c;从下面这个很简单的使用示例开始&#xff1a; import { createApp, ref } from "vue"…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023