vite组件按需导入：vite-plugin-babel-import vs vite-plugin-style-import

 vite 组件按需导入，可选择的插件有： vite-plugin-babel-import vite-plugin-style-import，我个人选择的是：vite-plugin-style-import

关于组件库按需加载的内容，推荐阅读：庖丁解牛：《最全babel-plugin-import源码详解 https://juejin.cn/post/6940797329603559454》

vite-plugin-babel-import

https://github.com/0ahz/vite-plugin-babel-import

// vite.config.js

// ...
import vitePluginImport from 'vite-plugin-babel-import';
// ...
export default {
  // ...
  plugins: [
    // ...
    vitePluginImport([
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style(name) {
          return `vant/es/${name}/index.css`;
        },
      },
      {
        libraryName: 'element-plus',
        libraryDirectory: 'es',
        style(name) {
          return `element-plus/lib/theme-chalk/${name}.css`;
        },
      },
      {
        libraryName: 'ant-design-vue',
        libraryDirectory: 'es',
        style(name) {
          return `ant-design-vue/lib/${name}/style/index.css`;
        },
      },
    ]),
  ],
  // ...
};

vite-plugin-style-import

https://github.com/vbenjs/vite-plugin-style-import

import { createStyleImportPlugin } from 'vite-plugin-style-import';

export default {
  // ...
  plugins: [
    // ...
   createStyleImportPlugin({
        resolves: [
          AndDesignVueResolve(),
          VantResolve(),
          ElementPlusResolve(),
          NutuiResolve(),
          AntdResolve(),
        ],
        libs: [
          // If you don’t have the resolve you need, you can write it directly in the lib, or you can provide us with PR
          {
            libraryName: 'ant-design-vue',
            esModule: true,
            resolveStyle: (name) => {
              return `ant-design-vue/es/${name}/style/index`
            },
          },
        ],
      }),
  // ...
};

转载本站文章《vite组件按需导入：vite-plugin-babel-import vs vite-plugin-style-import》,
请注明出处：https://www.zhoulujun.cn/html/tools/Bundler/vite/8838.html