前端面试练习24.3.5

webpack相关

项目使用webpack流程

  1. 进入一个初始化好的vue项目
  2. 下载安装webpack相关依赖包/插件
    1. npm install --save-dev webpack webpack-cli webpack-dev-server
    2. 安装一些相关的loader,比如vue-loader,babel-loader,css-loader等
  3. 创建webpack.config.js文件,进行相关配置
  4. 文件内容如下
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');module.exports = {mode: 'development', // 设置为开发模式entry: './src/main.js', // 入口文件output: {path: path.resolve(__dirname, 'dist'), // 输出目录filename: 'bundle.js', // 输出文件名publicPath: '/dist/' // 公共路径},module: {rules: [{test: /\.vue$/, // 处理.vue文件loader: 'vue-loader'},{test: /\.js$/, // 处理.js文件exclude: /node_modules/,use: {loader: 'babel-loader'}},{test: /\.css$/, // 处理.css文件use: ['vue-style-loader', 'css-loader']},{test: /\.(png|jpe?g|gif)$/i, // 处理图片文件use: [{loader: 'file-loader',options: {outputPath: 'images' // 输出目录}}]}]},resolve: {extensions: ['.js', '.vue', '.json'], // 解析文件扩展名alias: {'vue$': 'vue/dist/vue.esm.js', // 指定Vue版本'@': path.resolve(__dirname, 'src') // 设置@符号指向src目录}},plugins: [new VueLoaderPlugin() // Vue Loader插件],devServer: {contentBase: path.resolve(__dirname, 'public'), // 设置服务器根目录publicPath: '/dist/', // 公共路径port: 8080, // 端口号open: true // 自动打开浏览器}
};

1.webpack的构建流程

  1. 初始化参数:从配置⽂件和 Shell 语句中读取与合并参数,得出最终的参数;
  2. 开始编译:⽤上⼀步得到的参数初始化 Compiler 对象,加载所有配置的插件,执⾏对象的 run ⽅法开始执⾏编译;
  3. 确定⼊⼝:根据配置中的 entry 找出所有的⼊⼝⽂件;
  4. 编译模块:从⼊⼝⽂件出发,调⽤所有配置的 Loader 对模块进⾏翻译,再找出该模块依赖的模块,再递归本步骤直到所有⼊⼝依赖的⽂件都经过了本步骤的处理;
  5. 完成模块编译:在经过第4步使⽤ Loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系;
  6. 输出资源:根据⼊⼝和模块之间的依赖关系,组装成⼀个个包含多个模块的 Chunk,再把每个 Chunk 转换成⼀个单独的⽂件加⼊到输出列表,这步是可以修改输出内容的最后机会;
  7. 输出完成:在确定好输出内容后,根据配置确定输出的路径和⽂件名,把⽂件内容写⼊到⽂件系统。

2.webpack的优势

webpack适⽤于⼤型复杂的前端站点构建:

webpack有强⼤的loader和插件⽣态,打包后的⽂件实际上就是⼀个⽴即执⾏函数,这个⽴即执⾏函数接收⼀个参数,这个参数是模块对象,键为各个模块的路径,值为模块内容。⽴即执⾏函数内部则处理模块之间的引⽤,执⾏模块等,这种情况更适合⽂件依赖复杂的应⽤开发。

3.webpack的热更新是怎么做的

Webpack的热更新(Hot Module Replacement,HMR)是一项功能,它允许在不刷新整个页面的情况下替换、添加或删除模块。这使得开发者可以在保持应用程序状态的同时进行快速的开发和调试。

  1. 运行时更新模块

    • 当Webpack监听到源代码发生变化时,它会在后台重新编译修改过的模块,但并不会重新加载整个页面。
    • 更新的模块以及其依赖项会被标记为"热"(hot)。
  2. 模块热替换(Hot Module Replacement)

    • 当新的模块编译完成后,Webpack会使用WebSocket或者XHR等方式通知在运行时的应用程序。
    • 应用程序会接收到这些更新,并通过一种叫做"热更新中间件"的工具来处理这些更新。
  3. 应用程序响应更新

    • 应用程序会根据更新的类型(替换、添加或删除模块)来执行相应的操作。
    • 替换模块时,应用程序会尽可能保留当前模块的状态,例如组件的状态或者页面的滚动位置。
    • 如果一个模块无法热更新,那么整个页面就会被重新加载。
  4. 完成热更新

    • 一旦应用程序完成更新,它会发送一个消息给Webpack,告诉Webpack热更新已经完成。
    • 在完成更新之后,Webpack会重新编译其他模块,以确保它们与最新的代码保持同步。

4.webpack的性能优化是怎么做的

⽤webpack优化前端性能是指优化webpack的输出结果,让打包的最终结果在浏览器运⾏快速⾼效。

  • 压缩代码:删除多余的代码、注释、简化代码的写法等等⽅式。可以利⽤webpack的 UglifyJsPlugin 和 ParallelUglifyPlugin 来压缩JS⽂件, 利⽤ cssnano (css-loader?minimize)来压缩css
  • 利⽤CDN加速: 在构建过程中,将引⽤的静态资源路径修改为CDN上对应的路径。可以利⽤webpack对于 output 参数和各loader的 publicPath 参数来修改资源路径
  • Tree Shaking: 将代码中永远不会⾛到的⽚段删除掉。可以通过在启动webpack时追加参数 --optimize-minimize 来实现
  • Code Splitting: 将代码按路由维度或者组件分块(chunk),这样做到按需加载,同时可以充分利⽤浏览器缓存
  • 提取公共第三⽅库: SplitChunksPlugin插件来进⾏公共模块抽取,利⽤浏览器缓存可以⻓期缓存这些⽆需频繁变动的公共代码

5.webpack treeShaking机制的原理

  • treeShaking也叫摇树优化,是一种通过移除多于代码,来优化打包体积的,生产环境默认开启。
  • 可以在代码不运行的状态下,分析出不需要的代码;
  • 利用es6模块的规范
    • ES6 Module引入进行静态分析,故而编译的时候正确判断到底加载了那些模块
    • 静态分析程序流,判断那些模块和变量未被使用或者引用,进而删除对应代码

6.一些常见Loader

  • file-loader:把⽂件输出到⼀个⽂件夹中,在代码中通过相对 URL 去引⽤输出的⽂件
  • url-loader:和 file-loader 类似,但是能在⽂件很⼩的情况下以 base64 的⽅式把⽂件内容注⼊到代码中去
  • source-map-loader:加载额外的 Source Map ⽂件,以⽅便断点调试
  • image-loader:加载并且压缩图⽚⽂件
  • babel-loader:把 ES6 转换成 ES5
  • css-loader:加载 CSS,⽀持模块化、压缩、⽂件导⼊等特性
  • style-loader:把 CSS 代码注⼊到 JavaScript 中,通过 DOM 操作去加载 CSS。
  • eslint-loader:通过 ESLint 检查 JavaScript 代码

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

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

相关文章

【开源】SpringBoot框架开发教学资源共享平台

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 课程档案模块2.3 课程资源模块2.4 课程作业模块2.5 课程评价模块 三、系统设计3.1 用例设计3.2 类图设计3.3 数据库设计3.3.1 课程档案表3.3.2 课程资源表3.3.3 课程作业表3.3.4 课程评价表 四、系统展…

【基于springboot+Vue+Element ui的电影推荐之协同过滤算法简单实现】

基于springbootVueElement ui的电影推荐之协同过滤算法简单实现 1.基于用户的协同过滤算法的简单设计与实现1.1获取某个用户的评分矩阵1.2获取该用户与其他用户的相似度矩阵1.3获取两个用户之间的相似度并存储1.4返回推荐列表 2.基于物品的协同过滤算法的简单设计与实现2.1计算…

蓝桥杯每日一题(哈希、单调队列)

2058 笨拙的手指 二进制所有的可能保存进哈希表&#xff0c;三进制找出所有的可能判断哈希表中是否有数字。 注意一种情况就是修改完之后出现前导零。直接continue; 学到了&#xff0c;某些条件的限制不一定要在循环条件上&#xff0c;可以直接在循环体内。 #include<bi…

运维:记一次寻找定时任务并删除的经历

前言 我相信接手别人的服务器、或者在没有任何文档的情况去看自己原先的服务器,都或多或少会遇到莫名其妙的服务器独有规则。 比如你服务本身跑的好好的,突然啪的一下,没了! 什么原因导致的呢?其中,很大可能是定时任务在作祟。 原因分析 本次,我遇到的问题是:在Ubuntu系…

一分钟了解遥感中卫星、传感器、波段及数据之间的关系

感是利用卫星、飞机或其他载具上的传感器对地球表面进行观测和测量的科学技术。以下是一些常见的遥感相关术语: 卫星(Satellite):在遥感中,卫星是指绕地球轨道运行的人造卫星,其主要任务是携带各种传感器从空间中对地球表面进行观测。 传感器(Sensor):传感器是安装在卫…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:ImageSpan)

Text组件的子组件&#xff0c;用于显示行内图片。 说明&#xff1a; 该组件从API Version 10开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 无 接口 ImageSpan(value: ResourceStr | PixelMap) 参数&#xff1a; 参数名参数类…

抓包工具获取请求信息

Charles 下载安装 下载 官方下载地址&#xff1a;https://www.charlesproxy.com/latest-release/download.do 下载后傻瓜式安装就好&#xff0c;这个官方的需要激活&#xff0c;可以选择绿色版或者学习版 绿色版 绿色中文版&#xff1a;https://soft.kxdw.com/pc/Charles.z…

【代码】Android|获取存储权限并创建、存储文件

版本&#xff1a;Android 11及以上&#xff0c;gradle 7.0以上&#xff0c;Android SDK > 29 获取存储权限 获取存储权限参考&#xff1a;Android 11 外部存储权限适配指南及方案&#xff0c;这篇文章直接翻到最下面&#xff0c;用XXPermissions框架。它漏了这个框架的使用方…

opencv实现视频人脸识别

一. 实现指定图像的人脸识别 注意&#xff1a; 以下实例参考《OpenCV轻松入门面向Python》李立宗著&#xff0c;使用python语言&#xff0c;编辑器为PyCharm&#xff0c;且都运行成功。 1.dface3.jpg图片文件和当前代码放在同一级目录下。 2.级联分类器文件和当前代码文件放在…

MapReduce-Partition分区

Partition分区 1.默认Partitioner分区 (key.hashcode() & Interger.MAX_VALUE) % numReduceTasksnumReduceTasks默认为&#xff1a;1 //输出文件一个默认分区根据key的hashCode对ReduceTasks个数取模。 用户控制那个key存储到那个分区2.手动设置分区 //设置分区 job.set…

笔记78:软件包管理工具 apt 详解(包含常用 apt 命令介绍)

一、Ubuntu 的包管理工具 apt 过去&#xff0c;软件通常是从源代码安装的&#xff0c;安装步骤为&#xff1a;​​​​​​ 在Github上下载该软件的源码文件&#xff1b;查看Github上这个软件项目中提供的自述文件&#xff08;通常包含配置脚本或 makefile 文件&#xff09;&a…

软件架构的风格

1.数据流风格 数据流风格中&#xff0c;所有的数据按照流的形式在执行过程中前进&#xff0c;不存在结构的反复和重构&#xff0c;就像工厂中的汽车流水线一样&#xff0c;数据在流水线的各个节点上被加工。每完成一个环节&#xff0c;数据流都会被送入下一个环节&#xff0c;最…

Harbor二次开发前端环境搭建

1 前端开发环境搭建 &#xff08;1&#xff09;拉取分支代码 &#xff08;2&#xff09;前端开发推荐使用VsCode编辑器打开项目 打开 harbor\src\portal 文件夹&#xff0c;该文件夹为Harbor对应的前端代码所在位置 &#xff08;3&#xff09;在portal文件夹下创建名为 pro…

【Springer出版 · EI检索】| 第二届先进无人飞行系统国际会议(ICAUAS 2024)

会议简介 Brief Introduction 2024年第二届先进无人飞行系统国际会议(ICAUAS 2024) 会议时间&#xff1a;2024年6月14日-16日 召开地点&#xff1a;中国南昌 大会官网&#xff1a;ICAUAS 2024-2024 2nd International Conference on Advanced Unmanned Aerial Systems2024 2nd …

java SSM汽车租赁管理系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM汽车租赁管理系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用…

朴素贝叶斯基本原理sklearn实现

理论 先验概率&#xff1a;根据以往的分析经验得到的概率&#xff0c;先验概率不需要样本数据 后验概率&#xff1a;根据数据的特征进行分析 联合概率&#xff1a;几个事件同时发生的概率&#xff0c;P(瓜熟&#xff0c;瓜蒂脱落&#xff09; 定义 贝叶斯分类是一类分类算法的…

江大白 | 万字长文,算法工程师的深度经验总结!(建议阅读收藏!)

本文来源公众号“OpenCV与AI深度学习”&#xff0c;仅用于学术分享&#xff0c;侵权删&#xff0c;干货满满。 原文链接&#xff1a;万字长文&#xff0c;算法工程师的深度经验总结&#xff01; 以下文章来源于知乎&#xff1a;机智的叉烧 链接&#xff1a;https://zhuanlan…

【Spring高级】第3讲 Bean的生命周期

目录 基本的生命周期后处理器总结 基本的生命周期 为了演示生命周期的过程&#xff0c;我们直接使用 SpringApplication.run()方法&#xff0c;他会直接诶返回一个容器对象。 import org.springframework.boot.SpringApplication; import org.springframework.context.Config…

JAVA实战开源项目:智能停车场管理系统(Vue+SpringBoot)

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容A. 车主端功能B. 停车工作人员功能C. 系统管理员功能1. 停车位模块2. 车辆模块3. 停车记录模块4. IC卡模块5. IC卡挂失模块 三、界面展示3.1 登录注册3.2 车辆模块3.3 停车位模块3.4 停车数据模块3.5 IC卡档案模块3.6 IC卡挂…

opengl 学习(三)-----纹理

纹理就是贴图 分类前提demo效果解析 分类 前提 需要使用一个库来处理图片&#xff1a;#include <stb_image.h> https://github.com/nothings/stb 你下载好了之后&#xff0c;把目目录包含了就好 然后再引入 #define STB_IMAGE_IMPLEMENTATION #include "stb_i…