首页 > 其他分享 >vue3.0新的打包工具vite

vue3.0新的打包工具vite

时间:2022-11-04 09:01:15浏览次数:78  
标签:npm 编译 webpack vue3.0 vite 模块 打包

vite
vite是基于esbuild预构建的,esbuild是用GO语言编写的,比js编写的打包器预构建快10-100倍,js跟go语言相比太慢了。

与webpack相比:

vite服务器启动速度比webpack快,由于vite启动的时候不需要打包,也就无需分析模块依赖、编译,所以启动速度非常快。当浏览器请求需要的模块时,再对模块进行编译,这种按需动态编译的模式,极大缩短了编译时间,当项目越大,文件越多时,vite的开发时优势越明显。vite热更新比webpack快,vite在HRM方面,当某个模块内容改变时,让浏览器去重新请求该模块即可,而不是像webpack重新将该模块的所有依赖重新编译。

Vite的使用简单,只需执行初始化命令,就可以得到一个预设好的开发环境,开箱即获得一堆功能,包括:CSS预处理、html预处理、异步加载、分包、压缩、HMR等。使用复杂度介于Parcel和Webpack的中间,只是暴露了极少数的配置项和plugin接口,既不会像Parcel一样配置不灵活,又不会像Webpack一样需要了解庞大的loader、plugin生态,灵活适中、复杂度适中。

因此vite被称为下一代前端开发与构建工具。

 

1. 构建vite为基础的项目

创建项目时,我们只需要 npm create vite@latest "项目名"

2.输入vite-demo作为项目名称,选择 vue 和 vue-ts,按照提示执行

cd vite-demo

npm intall

npm run dev

 

 3.IDE推荐使用

VS Code + Volar

4.Visual Studio Code 打开项目,查看项目结构

 

标签:npm,编译,webpack,vue3.0,vite,模块,打包
From: https://www.cnblogs.com/shenbo666/p/16856523.html

相关文章

  • 打包配置 修改跨域
    1.java打包    1.1.运行java-jarservice-system.jar 2.前端打包 2.1修改重写  2.2npmrunbuild:prod2.3修改跨域nginxlocation/prod_......
  • Vite和Webpack 优缺点对比
     devserver冷启动vite 数秒之内即可完成启动Webpack动辄十几秒甚至几十秒热更新Vite在热更新方面也是碾压Webpack由于Vite采用unbundle机......
  • electron: 解决line插件打包后无法运行的问题
    awaitsession.defaultSession.loadExtension(path.join(__dirname,line_type),{allowFileAccess:true});上面这段代码在开发环境加载line没有问题,但是在打包后报错,......
  • pyinstaller 打包多个文件
    步骤一:1.进入虚拟环境内,生成.spec文件:pyi-makespec-wdata_operation.py 步骤二:1.更改.spec文件配置:pathex:项目路径;binaries:脚本依赖的......
  • vite_vue3自动引入
    //github地址:https://github.com/antfu/unplugin-auto-import1.npmi-Dunplugin-auto-import2.vite.config.tsimportAutoImportfrom'unplugin-auto-import/vi......
  • Layabox2.4+webpack4.x打包编译、热更新
    在laya项目目录下新建package.json点击查看代码{"scripts":{"bundle:dev":"webpack--configwebpack.config.debug.js--watch","serve":......
  • pyinstaller打包运行报错failed to execute script ***
    使用的参数是-w-F这是Google上的解释:--hidden-importMODULENAME,--hiddenimportMODULENAMENameanimportnotvisibleinthecodeofthe(s).Thisoptioncanb......
  • 记录--UNI-APP安卓本地打包详细教程(保姆级)
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助forin和forof相对于大家肯定都不陌生,都是用来遍历属性的没错。那么先看下面的一个例子:例1const......
  • QT5.6构建打包exe方法
    打包方法项目构建为Release,将Release文件夹里的exe文件拷贝的新建文件夹out中.运行QT的MingGW,进入文件夹out执行命令:windeployqt.exeSerialport_app.exe......
  • 关于使用pyinstaller 打包独立软件导致“无法创建文件”的bug
    目的:使用pyinstaller打包一个独立exe,在exe文件所在目录下生成log日志原来我是使用绝对路径,结果log日志会跑到tmp文件夹下……因此我将绝对路径修改为相对路径"./"就可以......