vite 相关实践

正儿八经的用了vite+vue3+ts差不多一个月了,体验感很好,基本会用vue2+webpack的可以快速上手,非常方便,暂时做个记录。

vite和webpack比较

vite突出的就是快速,本地开发秒开,体验感非常好,vite开发环境依赖esbuild进行预构建,生产环境则依赖rollup进行打包,并且充分利用了现代浏览器的特性,比如http2ES modulevite是站在众多巨人肩膀上的一个产物, 类似webpack + webpack-dev-server的结合体,是一个非常棒的前端项目的构建工具。

<script type="module">中,浏览器遇到内部的import引用时,会自动发起http请求,去加载对应的模块。

vite也正是利用了ES module这个特性,使用vite运行项目时,首先会用esbuild进行预构建,将所有模块转换为es module,不需要对我们整个项目进行编译打包,而是在浏览器需要加载某个模块时,拦截浏览器发出的请求,根据请求进行按需编译,然后返回给浏览器。

这样一来,首次启动项目(冷启动)时,自然也就比webpack快很多了,并且项目大小对vite启动速度的影响也很小。

本地开发时,vite会直接请求vue文件,而不是经过打包之后的js文件

生产打包时,利用rollup打包,在vite.config.js中可以对build.rollupOptions打包进行优化

webpack打包为万物皆可打包,从配置文件入口,利用导入导出方法做配合,成为一个大bundle.

vite配置

vite有很多优化点都进行了内置,记录下目前用到的几个点: vite中经常需要和环境变量env打交道,简要记录下

json 复制代码
.env 默认加载
.env.development 开发环境
.env.production 生产环境
.env.test 自定义测试环境

// package.json

"scripts": {
  "dev": "vite", //默认对应development
  "build": "vite build", //默认对应production
  "build:test": "vite build --mode=test",
},
javascript 复制代码
export default defineConfig(({ mode }) => {
    const env = loadEnv(mode, process.cwd())
    const { VITE_APP_BASEURL,VITE_APP_OUTDIR } = env
    return {
        base: VITE_APP_BASEURL, // 开发或生产环境服务的公共基础路径
        plugins: [],
        resolve: {},
        css: {},
        build: {},
        server: { },
    }
})

1.将打包的index文件进行拆分,第三方包拆分出来

javascript 复制代码
// vite.config.js

const dependencies = require('./package.json').dependencies;

build: {
    minify: 'terser',
    terserOptions: {
        compress: {
            //生产环境时移除console
            drop_console: true,
            drop_debugger: true,
        },
    },
    rollupOptions: {
        treeshake: true, // 开启 Tree Shaking,消除未使用的代码,减小最终的包大小
        output: {
            // 根据不同的js库 拆分包,减少index.js包体积
            manualChunks(id) {
                if (id.includes('node_modules')) {
                    // 指定需要拆分的第三方库或模块
                    const dependenciesKeys = Object.keys(dependencies);
                    const match = dependenciesKeys.find((item) => {
                        return id.includes(item);
                    });
                    const notSplit = ['vue', 'ant-design-vue'];
                    if (match && !notSplit.includes(match)) {
                        return match;
                    }
                }
            },
        },
        commonjsOptions: {
            requireReturnsDefault: 'namespace', // 要求ES模块返回其名称空
        }
    },
    outDir: VITE_APP_OUTDIR,
},

2.复制一份public中的html文件,向其中注入变量

php 复制代码
// vite.config.js

import { createHtmlPlugin } from "vite-plugin-html";

plugins: [
    createHtmlPlugin({
        minify: false, // 是否压缩文件 默认true
        inject: {
            data: {
                path: VITE_APP_BASEURL // 注入变量pah
            },
        },
    })
  
],
xml 复制代码
// html文件

<script>
    document.write(
       '<script type="text/javascript" charset="utf-8" src="<%- path %>config.js?v=' +
          new Date().getTime() +
          '"></script>'
    )


</script>
相关推荐
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟8 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss
黑客老李9 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
java·运维·服务器·前端·xss
晚风予星9 小时前
简记|LogicFlow自定义BPMN元素节点
前端
Json____10 小时前
使用html css js 开发一个 教育机构前端静态网站模板
前端·css·html·js·前端学习·企业站·教育机构网站