• home > tools > Bundler > vite >

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

    Author:zhoulujun Date:

    babel-plugin-import 是为了解决在打包过程中把项目中引用到的外部组件或功能库全量打包……,webpack 在bable配置文件里面配置就好了,那么vite如何配置呢?

     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