vue打包的基层原理

npm run build 的原理是利用 Vue CLI 的构建工具,根据项目中配置的各种规则,将源代码转换成可在浏览器中运行的静态文件。
npm run build 主要做了以下几个操作:

  1. 读取项目配置:根据项目中的配置文件,如 vue.config.js,读取项目的构建规则,包括输入输出路径、代码转换规则、插件等。

  2. 分析项目代码:通过 webpack 进行代码分析,包括依赖分析、代码分块、模块化等操作,生成代码依赖树。

  3. 转换代码:依据 webpack 分析得到的代码结构,将源代码通过 babel 等转换工具进行转换,以满足不同浏览器的不同规范要求。

  4. 打包代码:将转换后的代码进行压缩和编译,生成多个静态资源文件,如 js、css、图片等。

  5. 输出静态文件:将打包好的静态资源文件输出到指定的目录,以供浏览器获取和加载。

  6. 优化打包结果:针对生成的静态资源文件进行优化,主要包括去重、缓存、压缩等操作,提高浏览器加载速度和用户体验。

通过以上步骤,vue run build 将源代码转换成了可在浏览器中运行的静态文件,并进行了一系列的优化和处理,以提高应用的性能和稳定性。


在执行 npm run build 命令时,可以通过 package.json 文件中的 scripts 字段的 build 命令自定义构建脚本,从而实现各种操作。一般来说,npm run build 命令可以做以下操作:

  1. 清理缓存:在构建之前,清除之前已经生成的构建文件和缓存文件,以保证每次构建的环境干净。

  2. 编译源代码:使用相应的编译工具,将源代码转换成符合浏览器识别的代码。

  3. 压缩代码:对编译后的代码进行压缩和优化,减少代码体积,以提高网页加载速度。

  4. 处理资源文件:如将图片、视频等资源文件进行打包、压缩等操作,以减少网络请求并提高网页加载速度。

  5. 生成构建结果:将编译和压缩后的代码、资源文件等生成到指定的目录中,以供网页加载使用。

  6. 提高构建效率:使用一些插件和工具,如 webpack、rollup 等,提高构建效率和性能。

以上操作只是 npm run build 可以做的一些常见操作,具体可以根据项目的需要进行自定义和扩展。


清理缓存的具体操作是根据不同的构建工具进行的,这里以常用的 webpack 为例:

在 Webpack 中,可以通过使用 clean-webpack-plugin 插件来清理构建缓存。在 webpack.config.js 配置文件中添加该插件的配置:

const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = {// ...plugins: [// 清除之前的构建文件new CleanWebpackPlugin(),// ...],// ...
}

在执行 npm run build 命令时,Webpack 将会首先清除之前构建的文件和缓存,然后再重新构建新的文件。

除了使用插件清理缓存之外,也可以手动删除构建目录,例如在 package.json 文件中添加 "prebuild": "rm -rf dist" 命令,在执行 npm run build 命令时先删除 dist 目录,然后再进行构建。


自定义 build 构建脚本通常是指在执行 npm run build 命令时,除了默认的构建操作之外,还需要执行一些额外的处理逻辑,例如清理缓存、拷贝文件等操作。

可以在 package.json 文件中的 scripts 字段中自定义一个 build 命令,然后在该命令中添加自己的构建脚本。例如:

{"scripts": {"build": "rm -rf dist && vue-cli-service build && cp -r static/ dist/"}
}

在该例子中,我们通过 rm -rf dist 命令清理构建目录,然后执行 vue-cli-service build 进行构建,最后使用 cp -r static/ dist/static 目录下的静态资源文件拷贝到构建目录中。

如果您使用的是其他的构建工具或框架,也可以在相应的配置文件中添加您需要的构建脚本。例如,在 Webpack 中可以在 webpack.config.js 文件中的 plugins 字段中添加插件,在 Gulp 中可以在 gulpfile.js 文件中自定义任务等。

如果你需要更加高级的定制化,可以创建一个 build.js 文件,然后在 package.json 文件中的 scripts 字段中添加一个自定义的构建命令。

  1. 在根目录下创建一个 build.js 文件。

  2. 把你需要额外执行的操作写入 build.js 文件中。比如:

const { exec } = require('child_process')exec('rm -rf dist', (err, stdout, stderr) => {if (err) {console.error('执行命令出错:', err)return}console.log('清理构建目录')// 执行vue-cli-service build 命令exec('vue-cli-service build', (err, stdout, stderr) => {if (err) {console.error('执行命令出错:', err)return}console.log('构建成功')})
})
  1. package.json 文件中的 scripts 字段中添加一个自定义的构建命令。比如:
{"scripts": {"build:custom": "node build.js"}
}
  1. 在终端中执行 npm run build:custom 命令即可执行自定义的构建操作。

在这个例子中,我们在 build.js 文件中通过 exec 方法来执行系统命令,实现了清除构建目录和执行 vue-cli-service build 命令的功能。当然,你也可以在 build.js 文件中直接使用 Webpack、Gulp 等构建工具执行构建任务。


除了一些基本的使用和自定义构建脚本,我们还可以深入了解一些更深层次的原理,如:

  1. Webpack:Vue CLI 依赖 Webpack 进行打包构建,深入了解 Webpack 可以帮助我们更好的理解 Vue CLI 的打包构建过程。

  2. Babel:Vue CLI 默认集成了 Babel,可以使我们在代码中使用最新的 JavaScript 语法和更好的开发体验,进一步了解 Babel 可以帮助我们完成自定义配置、优化打包结果等操作。

  3. ESLint:Vue CLI 默认集成了 ESLint,帮助我们在开发过程中遵循一致的代码风格和规范,进一步了解 ESLint 可以帮助我们更好的配置规则,提高代码质量。

  4. Vue Router 和 Vuex:Vue CLI 也提供了集成 Vue Router 和 Vuex 的选项,深入了解这两个库可以帮助我们更好的理解 Vue 单页面应用的开发方式。

  5. 浏览器缓存:在上线后,我们需要考虑如何利用浏览器缓存来减小请求次数,优化应用性能。可以深入了解浏览器缓存原理、缓存策略等,从而更好的优化应用。

总之,Vue CLI 并不只是提供了一个简单的构建工具,更是一个底层的框架集成和应用开发工具。深入了解这些底层原理可以帮助我们更好的使用和扩展 Vue CLI。

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

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

相关文章

天津web前端培训班 前端是否适合零基础学?

随着HTML 5和ECMAScript 6的正式发布,大量的前端业务逻辑,极大地增加了前端的代码量,前端代码的模块化、按需加载和依赖管理势在必行,因此Web前端越来越被人们重视。 Web前端的就业前景 Web前端开发工程师薪资持续走高&#xff…

Spring MVC实现RESTful

在 Spring MVC 中,我们可以通过 RequestMapping PathVariable 注解的方式,来实现 RESTful 风格的请求。 1. 通过RequestMapping 注解的路径设置 当请求中携带的参数是通过请求路径传递到服务器中时,我们就可以在 RequestMapping 注解的 val…

小红书下一个爆款趋势锁定 | 秋冬种草指南

今夏「多巴胺」风靡全网,现秋日又捎来一股名为「美拉德」的风……俨然一副“新晋顶流”的架势。 如何抓住这一新趋势?本期千瓜将锁定小红书下一个爆款内容——「美拉德」,剖析笔记与底层逻辑,助力品牌洞见先机,运筹布…

uniapp 高度铺满全屏

问题&#xff1a;在有uni-tabbar的情况下&#xff0c;页面铺满剩下的部分 <template><view :style"{height:screenHeightpx}" class"page"></view> </template> <script>export default {data() {return {screenHeight: &q…

长胜证券:主板或以震荡整理为主 结构性行情持续

长胜证券指出&#xff0c;技术面看&#xff0c;沪指3150点上方谨慎看多&#xff0c;缩量横盘整理代表强势&#xff0c;向上打破需市场放量且权重配合&#xff0c;后市若打破并站稳3230点可视为强势回转行情开启&#xff0c;考虑到短期人民币弱势格局&#xff0c;主板或以震动整…

山东企业ITSS认证条件

申请ITSS认证的条件 1、ITSS认证一级升级为定量级应满足以下基本条件&#xff1a; 具有独立的法人资格; 运维服务能力体系已根据运维服务能力成熟度的一级特征和关键指标建立&#xff0c;并已有效运行六个月以上; 能够提供运营和维护服务的管理、人员、资源、技术和流程的有…

【PCL-11】提取平面上层的目标物,剔除平面下层目标物

因项目需求,需提取平面上的物体,不提取平面下的物体,尝试采用超体聚类+LCCP分割的方式,但由于上层点云模型一侧有空洞,导致分割效果不理想。 这里采用pcl::ExtractPolygonalPrismData类,实现平面上物体的提取。 pcl::ExtractPolygonalPrismData类是通过设定处于同一平面模…

力扣(LeetCode)算法_C++——字母异位词分组

给你一个字符串数组&#xff0c;请你将 字母异位词 组合在一起。可以按任意顺序返回结果列表。 字母异位词 是由重新排列源单词的所有字母得到的一个新单词。 示例 1: 输入: strs [“eat”, “tea”, “tan”, “ate”, “nat”, “bat”] 输出: [[“bat”],[“nat”,“tan”…

电脑入门: 路由器初学者完全教程

路由器初学者完全教程 本文以Cisco2620为例,讲述了路由器的初始化配置以及远程接入的配置方法,探讨了如何使用内部网络的DHCP服务功能为远程拨入的用户分配地址信息以及路由器常见故障的排除技巧。 (本文假定Cisco2620路由器为提供远…

React三属性之:props

作用 将父组件的参数传递给子组件 父组件 import ./App.css; import React from react; import PropsTest from ./pages/propsTest class App extends React.Component{render(){return(<div><h2>App组件</h2><PropsTest obj{{name:王惊涛,age:27}}>…

基于qt软件的网上聊天室软件

1.服务器: 1).功能: 用于创建一个客户端&#xff0c;通过文本编辑器来获得端口号&#xff0c;根据获得的端口号创建服务器&#xff0c;等待客户端连接 创建成功会提示服务器创建成功 在收到客户端发送的信息时&#xff0c;把这条信息发送给其他所有客户端&#xff0c;实现群…

【Linux-Day9-进程间通信】

进程间通信 前提引入&#xff1a; 我们之前接触过管道 | 将前一个命令的输出结果作为后一个命令的输入 如&#xff1a;ps | grep “sleep” 其实就是将 ps 的结果写入到一个区域&#xff0c;在从这个区域读出目标数据 有名管道 mkfifo 创建管道文件 : mkfifo fifo ->创…

ip_vs 原理解析 (四)hook 后的开始 NF_INET_LOCAL_OUT

NF_INET_LOCAL_OUT 根据优先级依次是 ip_vs_local_reply4&#xff0c;ip_vs_local_request4 | -- ip_vs_local_reply4| -- ip_vs_out| -- ip_vs_fill_iph_skb // 填充 ip 头| -- ip_vs_proto_data_get // 根据 ip 头获取协议对应的 ipvs data| -- pp->conn_out_ge…

python模块之 Motor 异步pymongo

一、介绍 Motor 是一个用于在 Python 中操作 MongoDB 的异步驱动程序。它是基于 asyncio 库构建的&#xff0c;充分利用了异步编程的优势&#xff0c;使得在 Python 中进行 MongoDB 数据库操作更加高效和灵活 异步支持&#xff1a;Motor 使用 asyncio 库提供异步操作的能力。…

单片机采集传感器数据(整形,浮点型)modbus上传

浮点型数据 占两个寄存器&#xff08;四个字节&#xff09; short 整形 占一个寄存器 &#xff08;两个字节&#xff09; 注意&#xff01;&#xff01;&#xff01;&#xff01; stm32 是小端模式&#xff0c;而modbus解析数据是大端模式 所以先发送高字节 如int a16777220…

selenium 自动化测试——环境搭建

安装python&#xff0c;并且使用pip命令安装 selenium pip3 install selenium 然后尝试第一次使用selenium 完成一个简单的测试自动化脚本 from selenium import webdriver from selenium.webdriver.common.by import By import timedriver webdriver.Chrome() driver.get(…

SAP MM学习笔记27- 购买依赖(采购申请)

前面已经努力的学习了 购买发注&#xff0c;入库&#xff0c;请求书照合 等功能&#xff0c;还是蛮多内容的哈。 剩下的功能&#xff0c;比如 右侧的 所要量决定&#xff0c;供给元决定&#xff0c;仕入先选择 还没学。 从这章开始&#xff0c;要开始学习它们了。 这一章先来…

Vue框架--Vue版Helloworld

上面我们对Vue有了一个初步的了解,下面我们一起来搭建一些Vue的环境以及写第一个Helloworld案例。 1.搭建Vue的环境 (1).使用本地文件的方式引入Vue.js和其他相关文件 (2).使用npm(安装Node.js)和Vue-cli引入 (3).这里需要安装开发者工具: GitHub - vuejs/devtools: ⚙️ Bro…

语音信号的采集与处理

数字信号处理是利用计算机或专用处理设备&#xff0c;以数值计算的方法对信号进行采集、抽 样、变换、综合、估值与识别等加工处理&#xff0c;借以达到提取信息和便于应用的目的。它在语 音、雷达、图像、系统控制、通信、航空航天、生物医学等众多领域都获得了极其广泛的 …

Python3.11教程4:异常处理

文章目录 九、异常处理9.1 异常堆栈跟踪9.2 异常处理的基本语法9.3 异常类及异常处理机制9.4 自定义异常类9.5 raise触发异常&#xff0c;及其与except的区别9.6 异常链9.7 处理多个不相关的异常9.8 用注释细化异常情况9.9 异常处理的最佳实践 Python 3.11.5 中文文档、cpython…