Vue/React自动导入性能优化

原创

程序员海军

发布于 2023-11-17 21:03:52

3760

发布于 2023-11-17 21:03:52

文章被收录于专栏：前端笔记ing前端笔记ing

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

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

Vue3 使用

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

安装插件

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

npm install --save-dev unplugin-vue-components @vue/compiler-sfc

配置插件

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

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 组件的解析器，你也可以根据需要选择其他解析器。

使用组件

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

<template>
  <el-button>Click me</el-button>
</template>

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

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

Vue2 使用

安装插件

npm install --save-dev unplugin-vue-components @vue/compiler-sfc

配置插件

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 组件的解析器，你也可以根据需要选择其他解析器。

使用插件

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

<template>
  <el-button>Click me</el-button>
</template>

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

unplugin-auto-import

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

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

安装插件在项目中安装 unplugin-auto-import 包，可以使用以下命令进行安装：

npm install --save-dev unplugin-auto-import

配置插件

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

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 模块。

使用模块

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

<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

安装插件

安装icon 图标库
安装 unplugin-icons unplugin-auto-import

npm install @element-plus/icons-vue 
npm install -D unplugin-icons unplugin-auto-import

2.配置插件

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,
    }),
  ],
 })

使用示例

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

两种方式：

<i-ep-图标名/>
<el-icon><i-ep-图标名/></el-icon>

   <i-ep-document color="red"/>
   <el-icon  :size="150" color="red"><i-ep-CirclePlus/></el-icon>

整合scss

安装依赖

npm i -D sass

创建样式变量文件

$btn-background:#6495ED;

在vite 中配置，引入样式变量文件，全局使用

  css: {
    // CSS 预处理器
    preprocessorOptions: {
        //define global scss variable
        scss: {
            javascriptEnabled: true,
            // 导入全局样式变量，这样不用每次导入了
            additionalData: `@use './src/styles/basic.scss' as * ;`
        }
    }
}