安全的响应式网站建设,网站建设功能,网站索引页面,户外媒体网站建设免费文章目录 一、什么是构建工具#xff1f;1.为什么使用构建工具#xff1f;2.构建工具的作用#xff1f;3.构建工具怎么用#xff1f; 二、经典面试题#xff1a;webpack和vite的区别1.编译方式不同2.基础概念不同3.开发效率不同4.扩展性不同5.应用场景不同6.总结#xff… 文章目录 一、什么是构建工具1.为什么使用构建工具2.构建工具的作用3.构建工具怎么用 二、经典面试题webpack和vite的区别1.编译方式不同2.基础概念不同3.开发效率不同4.扩展性不同5.应用场景不同6.总结 vite会取代webpack吗 三、vite的基本了解1.vite和vite-cli的区别2.Rollup 打包代码(1)学习vite了解rollup的原因(2)使用rollup打包 ES 模块的原因(3) ES6 模块与 CommonJS 模块的差异(4) 为什么说vite只支持浏览器原生 ES imports 的局限 3.vite的依赖预构建1过程2作用3构建总结作用详解 四、vite配置语法提示1. 方式一1. 方式二 五、vite通过环境变量来配置开发、生产环境 一、什么是构建工具
1.为什么使用构建工具 因为浏览器只能识别html、css、JavaScript类型的文件而typescript、vue、less… 等不同文件需要转化为不同文件在实际开发中稍微改一点东西都需要重新编译非常麻烦加上一些文件需要降级为旧版本的浏览器代码如es6转换为es5构建打包工具应运而生。 2.构建工具的作用
1模块化的开发如node_modules文件中引入代码 2处理兼容性的代码如less、ts语法转换不是构建工具做的而是构建工具将这些语法对应的程序集成在一起统一处理 3提高项目性能如打包后将代码压缩删除空格、压缩图片大小等因为代码体积越小传输服务器的请求构建页面越快 4优化开发体验同vue中的热更新、解决跨域、解决es6降级为es5的语法等——构建工具可以让我们不用关心在什么地方干什么只需要配置相对应的文件就能达到需要的效果。
3.构建工具怎么用
二、经典面试题webpack和vite的区别
1、基础概念不同2、编译方式不同3、开发效率不同4、扩展性不同5、应用场景不同
1.编译方式不同
项目越大构建工具webpack就会运行的越慢因为webpack是将所有的模块加载完成后启动服务的而vite是运行一部分就加载一部分。 为什么webpack需要将所有的模块加载完才能启动服务呢这就涉及到基础概念的问题了。 下图webpack和vite构建的流程图 2.基础概念不同
webpack支持多种模块化它可以把许多不同类型的模块和资源文件打包为静态资源因此需要一开始就统一代码意味着在项目运行前就需要将所有的依赖都一边后运行。 vite 基于浏览器原生 ES imports 的开发服务器。
3.开发效率不同
webpack的热更新是全量更新即使修改一个小文件也会重新编译整个应用使得在越大的项目中导致编译速度变慢。 vite的热更新是增量更新只更新修改的文件即允许在运行时动态导入和导出模块所以即使在大型项目中也能保持极快的编译速度。
4.扩展性不同
webpack自2012年诞生有着成熟的插件生态几乎可以实现任何你想要的功能扩展性以及灵活性非常强。 vite虽然也支持插件但相较于webpack的生态还有较长的距离。
5.应用场景不同
webpack由于其丰富的功能和扩展性适合于大型、复杂的项目。 而vite凭借其轻量和速度更适合于中小型项目和快速原型开发。
6.总结 vite会取代webpack吗
vite和webpack的区别 1、基础概念不同 2、编译方式不同 3、开发效率不同 4、扩展性不同 5、应用场景不同。 vite会取代webpack吗 总的来说vite即使有着较快的运行速度和编译速度但只支持浏览器原生 ES imports 的局限性即是优势也是劣势利用ES Module的特性只对浏览器请求的文件进行实时编译而不是像Webpack那样对整个项目进行预编译。这大大提高了开发环境的启动速度和热更新速度。以及远远低于webpack高度的自定义性和成熟的生态注定无法取代webpack。 三、vite的基本了解
1.vite和vite-cli的区别 举个毛坯房和精装房的区别。 webpack毛坯和 vue-cli精装 vite毛坯和vite-cli精装 vite和vite-cli本质上是两个东西是vue团队为了方便使用给了一个常用的配置项目给你使用和vue-cli一样不用从0开始用webpack构建vue项目一样。yarn create就是vite-cli的使用。但是这里说vite的详细使用和vite-cli是没有很大关系的在这里说明一下。 2.Rollup 打包代码
(1)学习vite了解rollup的原因 vite的官网原话使用rollup打包你的代码。如果你想了解vite了解rollup也是必不可少的。 (2)使用rollup打包 ES 模块的原因
rollup.js 的开发本意是打造一款简单易用的 ES 模块打包工具不必配置直接使用。这一点它确实做到了。 后来经过不断发展它也可以打包 CommonJS 模块。但是这时需要经过复杂配置实际上并没有比 Webpack 简单多少。 因此建议只把 rollup.js 用于打包 ES 模块这样才能充分发挥它的优势。 总结rollup用来做es模块的打包工具。如果 (3) ES6 模块与 CommonJS 模块的差异 ① CommonJS 模块输出的是一个值的拷贝ES6 模块输出的是值的引用。 ②CommonJS 模块是运行时加载ES6 模块是编译时输出接口。 ③CommonJS 模块的require()是同步加载模块ES6 模块的import命令是异步加载有一个独立的模块依赖的解析阶段。 ①举例commonJS和ES6导出一个自增函数调用。连续调用两次commonJS会输出1ES6输出2。 ②CommonJS 加载的是一个对象即module.exports属性该对象只有在脚本运行完才会生成。而 ES6 模块不是对象它的对外接口只是一种静态定义在代码静态解析阶段就会生成。
(4) 为什么说vite只支持浏览器原生 ES imports 的局限 上面说了由于vite只支持浏览器原生 ES imports 的局限导致不能取代webpack以简单的模块导入为例子在新建项目中安装loader在js文件中导入loader import loader from ‘loader’ 这里直接在JavaScript中执行会出现 js中不能使用相对路径需要 / ./ …/ 这样的形式引入的报错。 为什么es module 不去多走这一步呢 答案es import导入了loader会同时导入和loader同级的n个文件。导致消耗过大。服务端由于导入的都是本地缓存文件没有这个问题。 3.vite的依赖预构建
1过程 首先vite会找到对应的依赖通过esbuild对js语法处理的一个库将其他规范的代码转换为esmodeule规范的代码然后放到当前目录下node_modules/.vite/deps同时对而是modules规范的各个模块进行统一集成。 2作用 1.由于不同的第三方包有不同导出格式。把所有的库改为esmodules规范导入 2.对路径的处理可以直接使用 .vite/deps方便路径重写。 3.解决网络多包传输的性能问题。也就是原生esmodules导入文件不能用相对路径的原因之一 3构建总结作用详解
1当你导入了一个模块然后vite 会进行自动补全功能在node_modules中找到对应的文件。 2同时由于使用相对路径会导致同时导入与你导入模块相关的n个模块影响性能也就是esmodules导入不能使用相对路径的原因之一这里再开发环境中使用绝对路径再生产环境中用rollupJs打包公构建解决。 3之后由于不同的库导出方式不同如commonJS、esmodules你无法约束所有的库导出方式统一所以vite 重写你导出的模块变为函数也就是在实际开发过程中你导入那个模块就构建那个模块的情况。如下面示例。
// 举例
// 1:有个库导出了a模块
export default function a(){}
// 2:index.js 文件中
export { default as a }function ‘./a.js’
// 第2步相当于下面代码(将这个模块导入又导出了)
import a from ./a.js
export const a a;// vite 重写
function a(){}四、vite配置语法提示
1. 方式一
const viteConfig {// 配置
}
export default viteConfig;1. 方式二
import {defineConfig} from vite;export default defineConfig( config:{// 配置
})五、vite通过环境变量来配置开发、生产环境
