前端技术个人笔记

关于Vue3（vite）对项目的想法

这篇文章是关于Vue在正式成为默认版本后的理解

Vue + Vite的优点

Vue是渐进式框架，在Vue国内大🔥的情况下，衍生了很多UI库： Element UIopen in new window、Vant UIopen in new window等一些UI框架。

在昨天（2022年一月二十日）尤雨溪正式发布博客声明将在开年的第一天工作日进行一个vue在npm的默认版本变为3.x同时将要在文档和一些工具都将迁移到3.0时代，在beta阶段我就尝试过将Vue3上生产环境，并且取得了不错的效果，我在前不久尝试了一个想法，那就是利用Vite+jsx+VantUI+Tailwindcss开发了一款H5应用,在此之前我很推崇tailwindcss这种风格的原子css库，在tailwindcss的3.x版本之后立马就尝鲜了时下，在tailwindcss的2.1之后受windcss启发推出来tailwindcss的JIT模式并且在3.x成为既有功能。

废话不多说，我来个实际的例子

H5端对Vue3上生产的实际感官体验

由于公司内部有新的项目要启动，并且时间相对来说还算充分，并且用户体量并不大，我就采用了vite+vue3+jsx+tailwindcss+VantUI+vue-router+pinia的方案, 原本以为tailwindcss在H5端的实际开发体验并不会太好，但是开发的时候发现了妙用！

首先是Vue3对ts支持比较大，并且支持了静态的eslint语法检测，原本计划用由于公司内部ts的使用基本为零的情况下，我退而求其次改为jsx,并且采用了@antufuopen in new window的插件unplugin-auto-import自动导入使用的函数、用unplugin-vue-components进行组件的自动注册和css的按需导入，使用unplugin-icons进行icon的按需导入，这样项目基础完成了

配置如下:

// vite.config.js
import {
  defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'
import VueJsx from '@vitejs/plugin-vue-jsx'
// import legacy from '@vitejs/plugin-legacy'
import AutoImport from "unplugin-auto-import/vite";
import IconsResolver from "unplugin-icons/resolver";
import Icons from "unplugin-icons/vite";
import Components from "unplugin-vue-components/vite";
import {
  VantResolver
} from "unplugin-vue-components/resolvers";

export default defineConfig({
  plugins: [
    vue(),
    // 兼容不兼容的问题
    // legacy(),
    VueJsx(),
    AutoImport({
      imports: ["vue", "vue-router", "pinia"],
      resolvers: [VantResolver()],
    }),
    Components({
      dirs: ["src/components"],
      include: [/\.vue$/, /\.vue\?vue/, /\.jsx$/, /\.js$/],
      resolvers: [
        VantResolver({
          importStyle: "less"
        }),
        IconsResolver(),
      ],
    }),
    Icons({
      autoInstall: true,
    }),
  ]
})

视口的适配我是用postcss插件postcss-pxtorem做的

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: [
        '*'
      ]
    }
  }
}

由于项目有自己的主题色，这里我对使用的tailwindcss进行了配置变更，增加了主题色的配置增减了部分配置如下

// tailwindcss.config.js
module.exports = {
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}'
  ],
  theme: {
    stroke: {
      current: 'currentColor'
    },
    extend: {
      colors: {
        // 常规主题色
        primary: '#ff6927'
      }
    }
  }
}

下边是vue+vue-router+pinia用vite打包一个空项目（只有一个页面）的输出的文件（包含了响应式的修改font-size的代码）。其中的css的3kb为tailwindcss处理页面的复写的css样式，这部分是必不可少的。

截屏2022-01-23 18.48.58

截屏2022-01-23 18.49.26

打包出来的css部分代码

code2

页面代码如下

code

下方为一个正常打包的项目的js

截屏2022-01-23 19.08.42

上便可以看到，jingbao.[hash].js以及tabbar.[hash].js内联的有小图片,其中内联了8张png,如下方的这张图所示，这部分的代码可以单独调整打包工具，将其不内联为base64

tabbar

我展示的项目为一个大概12张页面的H5，总体的js是这样的，当然今天的重头戏不算是js的打包体积，其中Vue3的组合式API我会再行文一篇用来描述。

下文会详细描述关于原子样式库的css的打包体积。

截屏2022-01-23 19.43.27

当然项目优势不止如此，当你遇到某些页面很小的部分重复的时候，如果配合jsx页面渲染什么的直接导出来函数 类名自带 css不需要额外写 在自定义div会出现多个页面或者多个文件便利性出来了。当然要说直接写成组件更方便 但是很多小东西并不用写组件的！这时候jsx配合原子库的最优场景就来了，你直接将jsx部分包装成一个函数直接导出去，你需要考虑在写一次css吗？

不用！！！比如下方的场景

截屏2022-01-23 19.56.55

你有必要写两次吗？大可不必对吧！上代码

onejsx

twojsx

对于页面的只言片语的可以完美利用起来，有人说会让页面html过于冗余，那么这种导入这种是不是可以抹除这种劣势，甚至更省html更省css？

下方是个生产项目的示例

demo

看起来会增加HTML的的冗余，过于复杂，原子化的魅力就在于语义化的类名，关于具体优劣仁者见仁智者见智，实践之后再有发言的权利。我有个配置好的Vite+jsx+VantUI+Tailwindcss空页面仓库，地址：空白项目地址open in new window。

对于UI组件库的思考

说到这里，如果配合自己公司自有组件库，组件库构造也用原子样式，这个css最后项目可以严格控制在20kb以内，项目越大体积的大小越明显的（小）。

我萌生了自己做个有几个组件实例的组件库demo 然后原子样式库，如果采用导入css想必css完整导入不需要10kb吧。如果预处理器导入，可以直接完整打包进项目中，和项目中css共用类名，即使你并不想和项目中的css混用，那么你可以阅读https://tailwindcss.com/docs/plugins#prefix-and-importantopen in new window, 用前缀用来和项目中的css隔离进行作用域分离！！！我虽然安利tailwindcssopen in new window, 并不是说肯定要用这个，这种思维真的不错的，css和项目中的css混合使用，使用统一规范，组件库的css类和项目中的css是不是可以实现某种化学反应？css会更小，在我想象中这个组件库（使用原子样式库规范）的项目，能够尽可能的压缩css减少带宽压力。这不就变相的为企业节省更多的 💰？求求你们不要再卷了，狗头保命!

写在文末

我实现了一个很基本的原子css库支撑的demo，仓库地址https://github.com/guoshuangyang/atom-uiopen in new window

Last Updated: