Vue/React自动导入性能优化

2023-11-17 21:03:52 浏览数 (2)

自动导入组件： unplugin-vue-components

自动导入框架属性：unplugin-auto-import

Vue3 使用

unplugin-vue-components 是一个用于自动导入 Vue 组件的插件，它可以帮助我们在 Vue 项目中更方便地使用组件。如果你想在 Vue3 项目中使用 unplugin-vue-components，可以按照以下步骤进行配置：

  1. 安装插件

在项目中安装 unplugin-vue-components 和 @vue/compiler-sfc 包，可以使用以下命令进行安装：

代码语言：txt复制
npm install --save-dev unplugin-vue-components @vue/compiler-sfc
  1. 配置插件

在 vite.config.js 文件中添加以下内容：

代码语言：txt复制
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

在上面的代码中，我们使用 unplugin-vue-components 的 Components 函数创建了一个 Vite 插件，并将 ElementPlusResolver 添加到了解析器列表中。ElementPlusResolver 是一个用于解析 Element Plus 组件的解析器，你也可以根据需要选择其他解析器。

  1. 使用组件

现在你就可以在 Vue3 项目中使用 unplugin-vue-components 自动导入组件了。例如，在单文件组件中使用 Element Plus 的 ElButton 组件：

代码语言：txt复制
<template>
  <el-button>Click me</el-button>
</template>

<script>
export default {
  name: 'MyComponent',
}
</script>

在上面的代码中，我们直接在模板中使用了 ElButton 组件，而不需要手动导入它。unplugin-vue-components 会自动将组件导入到模块中，并且注册到 Vue 实例中。

Vue2 使用
  1. 安装插件
代码语言：txt复制
npm install --save-dev unplugin-vue-components @vue/compiler-sfc
  1. 配置插件
代码语言：txt复制
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  configureWebpack: {
    plugins: [
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  },
}

在上面的代码中，我们使用 unplugin-vue-components 的 Components 函数创建了一个 Webpack 插件，并将 ElementPlusResolver 添加到了解析器列表中。ElementPlusResolver 是一个用于解析 Element Plus 组件的解析器，你也可以根据需要选择其他解析器。

  1. 使用插件

现在你就可以在 Vue2 项目中使用 unplugin-vue-components 自动导入组件了。例如，在单文件组件中使用 Element Plus 的 ElButton 组件：

代码语言：txt复制
<template>
  <el-button>Click me</el-button>
</template>

<script>
export default {
  name: 'MyComponent',
}
</script>

在上面的代码中，我们直接在模板中使用了 ElButton 组件，而不需要手动导入它。unplugin-vue-components 会自动将组件导入到模块中，并且注册到 Vue 实例中。

unplugin-auto-import

文档链接：https://github.com/antfu/unplugin-auto-import

unplugin-auto-import 是一个用于自动导入模块的插件，它可以帮助我们在 Vue 项目中更方便地使用模块。如果你想在 Vue 项目中使用 unplugin-auto-import，可以按照以下步骤进行配置：

  1. 安装插件在项目中安装 unplugin-auto-import 包，可以使用以下命令进行安装：
代码语言：txt复制
npm install --save-dev unplugin-auto-import
  1. 配置插件

在 vite.config.js 文件中添加以下内容：

代码语言：txt复制
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: [
        'vue',
        {
          '@vueuse/core': ['useLocalStorage', 'useDeviceOrientation'],
        },
      ],
    }),
  ],
})

在上面的代码中，我们使用 unplugin-auto-import 的 AutoImport 函数创建了一个 Vite 插件，并将需要自动导入的模块添加到了 imports 列表中。例如，我们添加了 vue 和 @vueuse/core 模块。

  1. 使用模块

现在你就可以在 Vue 项目中使用 unplugin-auto-import 自动导入模块了。例如，在单文件组件中使用 useLocalStorage 和 useDeviceOrientation 方法：

代码语言：txt复制
<template>
  <div>
    <p>Local storage value: {{ value }}</p>
    <p>Device orientation: {{ orientation }}</p>
  </div>
</template>

<script>
import { useLocalStorage, useDeviceOrientation } from '@vueuse/core'

export default {
  name: 'MyComponent',
  setup() {
    const value = useLocalStorage('my-key', 'default-value')
    const orientation = useDeviceOrientation()

    return {
      value,
      orientation,
    }
  },
}
</script>

在上面的代码中，我们直接在模块中使用了 useLocalStorage 和 useDeviceOrientation 方法，而不需要手动导入它们。unplugin-auto-import 会自动将模块导入到模块中。

unplugin-icons

文档链接： https://github.com/antfu/unplugin-icons

  1. 安装插件
  • 安装icon 图标库
  • 安装 unplugin-icons unplugin-auto-import
代码语言：txt复制
npm install @element-plus/icons-vue 
npm install -D unplugin-icons unplugin-auto-import

2.配置插件

代码语言：txt复制
import AutoImport from 'unplugin-auto-import/vite'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'

export default defineConfig({
  plugins: [
    AutoImport({
      resolvers: [
        // 自动导入图标组件
        IconsResolver({
          prefix: 'Icon',
        }),
      ],
    }),
    Components({
      resolvers: [
        // 自动注册图标组件
        IconsResolver({
          enabledCollections: ['ep'],
        }),
      ],
    }),
    Icons({
      autoInstall: true,
    }),
  ],
 })
  1. 使用示例

通过官方复制你要的icon name 替换 到下面的图标名即可。

两种方式：

  1. <i-ep-图标名/>
  2. <el-icon><i-ep-图标名/></el-icon>
代码语言：txt复制
   <i-ep-document color="red"/>
   <el-icon  :size="150" color="red"><i-ep-CirclePlus/></el-icon>

整合scss

  1. 安装依赖
代码语言：txt复制
npm i -D sass
  1. 创建样式变量文件
代码语言：txt复制
$btn-background:#6495ED;
  1. 在vite 中配置，引入样式变量文件，全局使用
代码语言：txt复制
  css: {
    // CSS 预处理器
    preprocessorOptions: {
        //define global scss variable
        scss: {
            javascriptEnabled: true,
            // 导入全局样式变量，这样不用每次导入了
            additionalData: `@use './src/styles/basic.scss' as * ;`
        }
    }
}
css.preprocessorOptions 配置详解：
  • sass/scss - 选项。
  • less - 选项。
  • styl/stylus - 仅支持 define，可以作为对象传递。

所有预处理器选项还支持 additionalData 选项，可以用于为每个样式内容注入额外代码。请注意，如果注入的是实际的样式而不仅仅是变量时，那么这些样式将会在最终的打包产物中重复出现。

vue.js react 腾讯云前端性能优化大赛 2023腾讯·技术创作特训营第三期vue react

0 人点赞