elementUI全局引入改为局部引入

版本说明：

Vue版本：@vue/cli 4.4.6

webpack版本：4.41.1

node版本：v11.12.0

项目需要优化首页加载速度，所以需要把全局引入改为局部引入，百度加上自己的摸索，最后修改成功，记录一下，希望能够对别人有点启发：

1、安装 babel-plugin-component：

npm install babel-plugin-component -D

2、创建一个文件，里面是我们需要的组件

import {
  Link,
  Divider,
} from 'element-ui'
const element = {
  install: function(Vue) {
    Vue.use(Link);
    Vue.use(Divider);
  }
}
export default element

3、在main.js中把该文件引入

import element from './elementPartUI'
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(element)

4、修改babel.config.js

百度很多资料都是直接修改.babel文件，但是项目中并没有该文件，我还尝试手动创建该文件，但是项目报错，此路不通。

至此，成功转为局部引入。。。

但是我发现有一个babel.config.js文件，于是乎上网百度发现修改该文件也可以配置局部引入，粘上代码：

module.exports = {
  presets: [
    '@vue/app', [
      '@babel/preset-env', {
        modules: false
      }
    ]
  ],
  plugins: [
    [
      'component',
      {
        'libraryName': 'element-ui',
        'styleLibraryName': 'theme-chalk'
      }
    ]
  ]
};

但是babel.config.js文件和 .babel文件到底有什么区别呢？

Babel 有两种并行的配置文件格式，可以一起使用，也可以分开使用。

1. 项目范围的配置

babel.config.js 文件，具有不同的拓展名（json、js、html）

babel.config.js 是按照 commonjs 导出对象，可以写js的逻辑。

2. 相对文件的配置

.babelrc 文件，具有不同的拓展名

总结：baberc 的加载规则是按目录加载的，是只针对自己的代码。config的配置针对了第三方的组件和自己的代码内容。babel.config.js 是一个项目级别的配置，一般有了babel.config.js 就不会在去执行.babelrc的设置。

中文文档链接：https://www.babeljs.cn/

注意： .babelrc 和 .babel.config.js

两个文件都是es6语法编译配置，用来将es6代码转换成浏览器能够识别的es5代码。

<meta charset="utf-8">

<meta charset="utf-8">

image.png

Babel的配置文件就是.babelrc，存放在根目录下。使用Babel的第一步，就是配置这个文件。

该文件是用来设置转码规则和插件的 ：

1. {
2. "presets":[],
3. "plugins":[]
4. }

presets 字段设定转码规则，官方提供，根据需要安装。

image.png

然后，将这些规则加入 .babelrc中。

image.png

当按需加载组件的时候，babel-plugin-component 。如果两个文件同时配置，并没有生效。原因就是配置无法合并，

导致文件无效。解决办法：把配置放入同一个文件，删除另一个，只保留.babelrc就可以了。