面试知识储备--打包工具篇(webpack和vite)

news2024/11/16 3:20:01

1.vite常用配置

常用配置
1.preprocessorOptions 传递给 CSS 预处理器的配置选项
2.PostCSS 也是用来处理 CSS 的,只不过它更像是一个工具箱,可以添加各种插件来处理 CSS
3.resolve.extensions
导入时想要省略的扩展名列表。默认值为 [‘.mjs’, ‘.js’, ‘.ts’, ‘.jsx’, ‘.tsx’, ‘.json’] 。
4.optimizeDeps.force
是否开启强制依赖预构建。node_modules 中的依赖模块构建过一次就会缓存在 node_modules/.vite/deps 文件夹下,下一次会直接使用缓存的文件。而有时候我们想要修改依赖模块的代码,做一些测试或者打个补丁,这时候就要用到强制依赖预构建。
5.server.host
指定服务器监听哪个 IP 地址。默认值为 localhost ,只会监听本地的 127.0.0.1 。当我们开发移动端项目时,需要在手机浏览器上访问当前项目。这时候可以将 host 设置为 true 或 0.0.0.0 ,这样服务器就会监听所有地址,包括局域网和公网地址。
6.server.proxy
反向代理也是我们经常会用到的一个功能,通常我们使用它来进行跨域:
7.build.assetsInlineLimit
图片转 base64 编码的阈值。为防止过多的 http 请求,Vite 会将小于此阈值的图片转为 base64 格式,可根据实际需求进行调整。

2.vue项目中webpack常用配置

vue.config.js常用配置
参考配置
1.configureWebpack和chainWebpack区别
在这里插入图片描述
2.gzip压缩

config.plugins.push(new CompressionWebpackPlugin({
                algorithm: 'gzip',
                test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
                threshold: 10240,
                minRatio: 0.8
            }));

3.内联方式
在这里插入图片描述
4.svg-sprite-loader 将svg图片以雪碧图的方式在项目中加载;
5.如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建
productionSourceMap: true

3.webpack常用配置

参考连接:
webpack基础配置1
webpack基础配置2
1.核心概念
entry:入口文件,Webpack 执行构建的第一步从 entry 开始,可抽象成输入。
output:输出文件,Webpack 执行构建的最后一步输出文件,可抽象成输出。
module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件。
loader:webpack本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要配置 loader 转换器。
plugin:扩展插件,在 Webpack 构建流程中的特定时机注入扩展逻辑。
mode: 模式,模式指定了 webpack 使用相应环境下的配置。
2.处理不同类型文件资源
css-loader CSS 转化成 CommonJS 模块
less-loader、sass-loader 将 Sass、less 编译成 CSS
style-loader 把 CSS 插入到 DOM 中

// webpack.config.js
{
  test: /.(png|jpg|gif|jpeg)$/,
  type: "asset",
  parser: {
    dataUrlCondition: {
      // 小于8kb的图片转base64
      maxSize: 8 * 1024, // 8kb
    },
  },
},

我们想把小图片转为base64,减少http请求。大图片不转换为base64,减少打包体积
babel-loader ES6 语法编写的代码转换为向后兼容的代码(低版本浏览器兼容)
它能将ES6的一些语法进行编译转换,比如箭头函数、点点点运算符等。
但是如果是async函数、promise 对象、数组的一些方法(includes)等,它没办法处理,所以此时我们js代码仍然存在兼容性问题,一旦遇到低版本浏览器会直接报错。所以我们想要将 js 兼容性问题彻底解决,这时候需要用到core-js
HtmlWebpackPlugin 打包自动生成html文件并且引入对应script,而不是自己手动修改 index.html 文件
devServer 搭建开发服务器 (开发环境)

//开发服务器
    devServer: {
        host: "127.0.0.1", // 主机地址
        port: 3000, // 端口
        open: true, // 自动打开浏览器
        hot: true, // 开启HMR HotModuleReplacement(HMR)
        //HMR 允许在运行时更新各种模块,而无需完全刷新。 原本更改一个模块会重新打		包所有模块,HMR会使用之前打包的结果,只更新有变化的模块,大大提高了开发效率
    },

4.webpack优化

生产环境优化
MiniCssExtractPlugin 可以提取 CSS 为单独文件
postcss-loader 解决大多数样式兼容问题,也可以添加各种插件来处理 CSS
CssMinimizerPlugin 压缩 CSS (默认生产模式会对 JS 和 html进行压缩)
cache缓存 每次打包都要经过eslint检查和babel编译,如果每次都重新编译,会非常消耗性能,所以需要缓存 设置cacheDirectory为true,在后续构建中直接读取缓存,不需要在重新构建

thread-loader 多线程打包,可以加快打包速度 我们启动进程的数量就是我们 CPU 的核数

new TerserWebpackPlugin({
      parallel: threads,
    }),

TreeSaking 是一个 webpack 插件,它能够分析出你的代码中那些部分是永远不会被用到,然后剔除掉这部分。 webpack 默认开启
runtimeChunk
通俗解释:(生成一个运行时中间中间文件,其他文件通过他连接,不影响本身)
如果main.js里面引入了sum.js并且打包时sum.js设置了hash值 如果sum.js发生变化,它的文件名的hash值就会发送变化 导致main.js也要重新打包。 所以我们希望有一个文件a,存储了sum.js的hash值,main.js通过a去访问sum.js,这样无论sum.js的文件名的hash值怎么变都不会影响到main.js

runtimeChunk: {
            name: (entrypoint) => `runtime~${entrypoint.name}.js`
        }

optimization 代码分割配置
打包会将所有js文件打包到一个文件,导致加载时间过长,我们可以将代码拆分成多个文件,然后按需加载。

optimization: {
  // 代码分割配置
  splitChunks: {
    chunks: 'all', // 所有模块都进行分割
    // minSize: 30000, // 模块大于30kb才进行分割
    // maxSize: 0, // 最大尺寸0
    // minChunks: 1, // 最少使用过一次就进行分割
    // maxAsyncRequests: 5, // 异步加载chunk的并发请求数量最多为5个
    // maxInitialRequests: 3, // 入口文件最多只能初始加载3个chunk
    // automaticNameDelimiter: '~', // 命名分隔符
    // enforeSizeThreshold: 50000, // 模块大于50kb强制打包
    // name: true, // 缓存组名
    cacheGroups: {
      // 缓存组
      default: {
        minSize: 0, // 模块大于0kb才进行分割
        minChunks: 2, // 最小使用过一次就进行分割
        priority: -20, // 优先级
        reuseExistingChunk: true, // 如果当前的chunk包含的模块已经被其他chunk包含了,那么将不会再次被引入
    }
  },
},

PreloadWebpackPlugin
我们想要在浏览器空闲时间去加载后续需要使用的资源 而不是在需要时才加载,如果资源太大,用户还是会感到卡顿

Preload: 告诉浏览器立即加载
Prefetch: 告诉浏览器在空闲时加载

它们都只会加载资源,不执行 Preload 只能加载当前页面需要使用的资源,Prefetch 可以加载下一个页面需要使用的资源 注意: 它们兼容性比较差
externals外部扩展 防止将某些 import 的包(package)打包到 bundle 中,而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。
,比如JQuery文件比较大,最好不参与打包
pwa 使用workBox,用WorkBoxWebpackPlugin插件生成一个serviceworker,此技术还可以实现联网正常访问项目
dllReferencePlugin告诉webpack哪些东西需要打包,哪些东西不需要打包,使用AddAssetHtmlWebpackPlugin这个插件,将某个文件打包输出出去,并在html自动引入该资源

开发环境优化
devtool: Source Map(源代码映射)
打包之后的代码我们很难看懂,不好调试,我们希望我们可以去调试打包之后的代码,以提高开发体验。 SourceMap 会生成xx.map,里面包含源代码和构建后代码每一行的映射关系,浏览器在运行打包后的代码时,如果遇到报错,会去查找对应的 SourceMap 文件,然后把报错位置映射到源代码上,这样就便于我们进行调试了。SourceMap 有很多格式,但实际开发只需要关注两种情况
开发模式:cheap-module-source-map 打包速度快,只包含行映射
生产模式:source-map 包含列,行,源代码,构建后代码的源代码位置映射,但打包速度慢
HotModuleReplacement(HMR) 热更新
HMR 允许在运行时更新各种模块,而无需完全刷新。 原本更改一个模块会重新打包所有模块,HMR会使用之前打包的结果,只更新有变化的模块,大大提高了开发效率 实际开发中会用到 vue-loader react-hot-loader
OneOf
OneOf 可以让loader只运行一次,如果多个loader对同一个文件生效,那么只会运行第一个,后面的会被忽略,减少loader匹配次数
懒加载预加载 使用contenthash值进行打包
懒加载的本质实际上就是代码分离。把代码分离到不同的 bundle 中,然后按需加载或并行加载这些文件

output: {
	filename: "[name].[contenthash:10].js" //生成hash防止重复实现代码分离
}

此处对添加 hash 的资源设置长期强缓存,可大幅度提高该网站的 HTTP 缓存能力,从而大幅度提高网站的二次加载性能
output的情况
output的filename可以指定hash。有两个值可以选择:

[hash]。hash值是特定于整个构建过程的。

[chunkhash]。hash值是特定于每一个文件的内容的。

我们理想的缓存设计是,在一次版本更新(重新构建)后,只有当一个文件的内容确实发生了变化,它才需要被重新下载,否则应使用缓存。
长缓存优化
什么是长缓存?在webpack中如何做到长缓存优化?

浏览器在用户访问页面的时候,为了加快加载速度,会对用户访问的静态资源进行存储,但是每一次代码升级或者更新,都需要浏览器去下载新的代码,最方便和最简单的更新方式就是引入新的文件名称。

在webpack中,可以在output给出输出的文件制定chunkhash,并且分离经常更新的代码和框架代码,通过NameModulesPlugin或者HashedModulesPlugin使再次打包文件名不变
webpack 自动发布

5.webpack4和5的区别

开发环境中: webpack5相对于更大一点,主要是多了很多注释,因为现在在测试版本,注释比较多
生产环境中: webpack5的体积比webpack4小了非常多,webpack5 的tree shaking功能更加强大
webpack5内部本身就自带 js 压缩功能,他内置了 terser-webpack-plugin 插件,我们不用再下载安装。而且在 mode=“production” 的时候会自动开启 js 压缩功能
webpack5 内部内置了 cache 缓存机制。直接配置即可。

6.vite和Webpack的区别

构建速度:Vite 的构建速度比 Webpack 更快,因为 Vite 在开发环境下使用了浏览器原生的 ES 模块加载,而不是像 Webpack 一样使用打包后的文件进行模块加载。 Vite 在开发环境下具有快速的冷启动和热重载能力基于 ES 模块导入原理,无需打包就可以实时编译。在 Vite 中,每个模块都可以独立地进行编译和缓存,这意味着它只需要重新编译修改过的模块(按需加载),而不是整个应用程序。这使得 Vite 开发起来更加高效。

配置复杂度:Vite 的配置相对更简单,因为它无需进行大量的配置,只需指定一些基本的选项就可以开始开发。Webpack 的配置更加复杂,需要针对具体项目进行不同的配置,且需要理解各种插件、Loader 等概念。

生态环境:Webpack 的生态环境更加成熟,在社区中拥有广泛的支持和丰富的插件库。而 Vite 尚处于发展阶段,尽管其已经获得了很多关注,但其生态系统仍然不太完善。

功能特性:Webpack 是一个功能更加全面的打包工具,支持各种 Loader 和插件,可以处理多种类型的文件和资源。而 Vite 的设计初衷是专注于开发环境下的快速构建,因此其对一些高级特性的支持相对较少。

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

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

相关文章

小团队之间有哪些好用免费的多人协同办公软件

在小团队协作中,选择适合的多人协同办公软件是提高工作效率和团队协作的重要一环。幸运的是,市场上有许多大多数功能都免费的多人协同办公软件,为小团队提供了强大的协作功能和便捷的工作环境。 在本文中,我将根据自己多年的在线…

2.2.C++项目:网络版五子棋对战之数据管理模块的设计

文章目录 一、数据管理模块实现(一)功能 二、设计(一)数据库设计(二)创建user_table类 一、数据管理模块实现 (一)功能 数据管理模块主要负责对于数据库中数据进行统一的增删改查管…

3ds Max2023安装教程(最新最详细)

目录 一.简介 二.安装步骤 软件:3ds Max版本:2023语言:简体中文大小:6.85G安装环境:Win11/Win10/Win8/Win7硬件要求:CPU3GHz 内存16G(或更高)下载通道①百度网盘丨64位下载链接: …

【蓝桥每日一题]-动态规划 (保姆级教程 篇10)#方格取数

高能预警:讲了这么久动态规划了,该上点有难度的题吧 目录 题目:方格取数 思路(解法一): 解法二: 题目:方格取数 思路(解法一): 如果只有两个方向…

openCV Cuda

下载 git clone https://github.com/opencv/opencv.git git clone https://github.com/opencv/opencv_contrib.git确保准备好以下内容 1: visual studio (不是vs code) 2:下载后的两个包裹会放在以下结构 这样放的原因是我Ub…

Java EE-使用Servlet搭建一个简单的前后端交互程序

上述前端和后端的代码如下&#xff1a; 前端&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"vie…

数据库笔记——SQL语言DQL语句

schema等于database 数据库 datagrip中使用控制台进行操作&#xff1a; 右键new QueryConsole 创建表格create table中&#xff1a; 1. 括号内不管是定义属性还是声明约束&#xff0c;都使用逗号分隔&#xff0c;最后一句不用逗号 2. 括号外使用分号 DDL&#xff1a;数据库定…

python接口自动化测试(单元测试方法)

一、环境搭建 python unittest requests实现http请求的接口自动化Python的优势&#xff1a;语法简洁优美, 功能强大, 标准库跟第三方库灰常强大&#xff0c;建议大家事先了解一下Python的基础;unittest是python的标准测试库&#xff0c;相比于其他测试框架是python目前使用最广…

思辨:移动开发的未来在哪?

前段时间在知乎看到关于移动开发未来的问题&#xff0c;就尝试回答了一下&#xff0c;也触发了我对移动开发未来的思考。 移动开发未来怎么样? - 知乎 https://www.zhihu.com/question/613842211 什么是移动开发&#xff1f; 我们口中说的移动开发是什么&#xff0c;从广义和…

项目管理实战总结(二)-沟通路径

在一个大型的项目管理中&#xff0c;不同的沟通路径&#xff0c;会对整个事情的进展形成不同的影响。从项目管理的视角来看&#xff0c;该如何驱动项目有效进展&#xff0c;失之毫厘谬以千里。 沟通路径&#xff1a;调查问卷的推动事宜 在项目进行到了后期&#xff0c;甲方希…

项目管理实战总结(一)

前言 主动申请参与到这个项目&#xff0c;是非常清楚工作强度大、难度大的情况的&#xff0c;明知山有虎偏向虎山行。我确信通过这个项目&#xff0c;一定有我需要的东西。目前项目已经完成了终验的专家评审&#xff0c;进入到运维阶段。对于个人而言&#xff0c;如果记忆中只…

全网超细,自动化测试-数据管理/实施落地问题,跟着直接上高速...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 自动化测试——测…

C++迭代器失效

在STL中&#xff0c;有些操作会导致迭代器失效&#xff0c;即之前获取的迭代器无法再安全地使用。这是因为这些操作可能会改变容器的结构&#xff0c;例如插入、删除元素等。 具体来说&#xff0c;以下情况下迭代器会失效&#xff1a; 1. 当插入或删除元素导致容器中的内存重新…

Go并发可视化解释 - sync.WaitGroup

场景 Avito是一名校车司机&#xff0c;他帮助4个Gopher孩子上学。每天&#xff0c;Avito在他们的社区等待孩子们。他不知道孩子们需要多长时间&#xff0c;但他确切地知道有4个孩子他需要等待。 1*aZnEggopv4Tsbyyj3e5JFg.png 当一个孩子准备好时&#xff0c;他/她会说&#xf…

跨境干货 | 如何搭建自己的独立站?

很多跨境电商在第三方平台经营许久后&#xff0c;会想摆脱第三方规则的限制建立起自己的品牌。 对于新手来说建立独立站是很有挑战的&#xff0c;建立独立站前首先我们需要了解一下什么是独立站&#xff1f;从字面意思来理解就是拥有属于自己的网站自己搭建跨境独立站&#xff…

【Python语言速回顾】——基础语法

目录 引入 一、PEP8代码规范和风格 二、变量和数据 1、变量 2、运算符 三、三种程序结构 1、分支结构 2、循环结构 四、组合数据类型 1、列表&#xff08;list&#xff09; 2、元组&#xff08;tuple&#xff09; 3、字典&#xff08;dict&#xff09; 5、集合&…

Python学习基础笔记七十七——json序列化

客户端和服务端之间需要交换数据才能完成各种功能。 假设 服务端程序都是用Python语言开发的话&#xff0c;那么 服务端从数据库中获取的最近的交易列表&#xff0c;可能就是像下面这样的一个Python列表对象&#xff1a; historyTransactions [{time : 20170101070311, #…

LoadRunner录制脚本+编写脚本

LoadRunner安装* 为什么选择LoadRunner 1&#xff09;Jmeter没有录制功能 2&#xff09;可以设计非常非常丰富的测试场景 3&#xff09;LoadRunner能够产出非常丰富的测试报告 LoadRunner三大组件的关系 每个组件是干什么的 VUG&#xff1a;录制脚本&#xff0c;&#xff…

天梯赛:L1-005 考试座位号

每个 PAT 考生在参加考试时都会被分配两个座位号&#xff0c;一个是试机座位&#xff0c;一个是考试座位。正常情况下&#xff0c;考生在入场时先得到试机座位号码&#xff0c;入座进入试机状态后&#xff0c;系统会显示该考生的考试座位号码&#xff0c;考试时考生需要换到考试…

线程是如何进行创建的

对于任何一个进程来讲&#xff0c;即便我们没有主动去创建线程&#xff0c;进程也是默认有一个主线程的。线程是负责执行二进制指令的&#xff0c;它会根据项目执行计划书&#xff0c;一行一行执行下去。进程要比线程管的宽多了&#xff0c;除了执行指令之外&#xff0c;内存、…