组件按需加载（antd、element-ui）

本文将介绍按需加载插件ts-import-plugin、babel-plugin-import、babel-plugin-component区别和用法

三者区别

babel-plugin-import 是 ant-design 团队出品，其它大多在其基础上修改

babel-plugin-component 是饿了么团队在前者基础上做了一些改动

ts-import-plugin 是 babel-plugin-import 的typescript版本

ant-design-vue

在Nuxt框架中配置方法：

# 参考商城项目 pc-mall
yarn add babel-plugin-import
# nuxt.config.js
build: {
  transpile: ['ant-design-vue'],
  babel: {
    plugins: [
      [
        'import',
        {
          libraryName: 'ant-design-vue',
          libraryDirectory: 'es',
          // 选择子目录 例如 es 表示 ant-design-vue/es/component
          // lib 表示 ant-design-vue/lib/component
          style: 'css'
          // 默认不使用该选项，即不导入样式 , 注意 ant-design-vue 使用 js 文件引入样式
          // true 表示 import  'ant-design-vue/es/component/style'
          // 'css' 表示 import 'ant-design-vue/es/component/style/css'
        }
      ]
    ]
  }
}

Element-ui

在Nuxt框架中配置方法：

# 参考优学项目 pc-youxue
yarn add babel-plugin-component
# nuxt.config.js
build: {
  transpile: [/^element-ui/],
  babel: { // 按需加载
    plugins: [
      [
        'component',
        {
          libraryName: 'element-ui',
          styleLibraryName: 'theme-chalk'
        }
      ]
    ]
  }
}

使用 ts-import-plugin 或 babel-plugin-import，详情见文档：

https://github.com/ElementUI/babel-plugin-component

Vant

使用 ts-import-plugin，通过Vue-cli创建的移动端项目配置方法：

# 参考移动端项目 m-wangxiao
yarn add ts-import-plugin
# vue.config.js
const tsImportPluginFactory = require("ts-import-plugin");
module.exports = {
  chainWebpack: config => {
    config.module
      .rule("ts")
      .use("ts-loader")
      .tap(options => {
        options = webpackMerge.merge(options, {
          transpileOnly: true,
          getCustomTransformers: () => ({
            before: [
              tsImportPluginFactory({
                libraryName: "vant",
                libraryDirectory: "es",
                style: true
              })
            ]
          }),
          compilerOptions: {
            module: "es2015"
          }
        });
        return options;
      });
  }
}