将按需引入的element-plus改为cdn引入

背景

升级到vue3+element-plus后，发现使用vue-cli打包出的生产环境vendors特别大，查看依赖项发现element-plus占比巨大。百度了各种办法都没生效，偶然间的一个想法解决了这个问题，现记录下来分享给一样遇到这个问题的小伙伴。

解决方案

按需引入场景（亲测有效）

1. 在vue.config.js中配置externals

// 配置需要使用cdn的第三方资源
config.set('externals', {
   vue: 'Vue',
   'vue-router': 'VueRouter',
   axios: 'axios',
   echarts: 'echarts',
   nprogress: 'NProgress',
   'element-plus': 'ElementPlus'
})

可能有些小伙伴已经设置了element-plus的externals，但是最后还是打包到vendors中。莫着急，往下看…

2. 在babel.config.js中屏蔽掉按需引入的element-plus配置

module.exports = {
  "presets": [
    "@vue/cli-plugin-babel/preset"
  ]/*,
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-plus",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]*/
}

再次编译发现vendors体积明显变小了，依赖项里的element-plus也没有了

3.在index.html中引入cdn资源的vue、element-plus的js和css（自行百度）

4. 解决打包后部分组件中显示内容成英文

import { locale } from 'element-plus'
import lang from 'element-plus/lib/locale/lang/zh-cn'

export default (app) => {
  locale(lang)
  components.forEach(component => {
    app.use(component)
  })
}

原因是element-plus默认是英文版，如需显示中文，需要引入语言包。由于中文语言包容量仅1.5k，所以这个没必要从cdn引入，放到vendors中即可。

5. 原因分析

按需引入场景下，打包过程中会优先走babel.config.js中的按需引入配置，所以导致element-plus一直能打包进去。

全局引入场景（未实际操作过）

1. 按照上述步骤注释掉babel.config.js中相关引入的element-plus配置即可

2. 或者直接注释掉main.js中对element-plus的js和css文件引入

3. 至于中文语言包的引入按照上述操作即可

以上是我解决element-plus优化打包后体积的全过程，如对您有帮助请点个赞，如果有更好的解决办法或者文中描述不正确的地方，麻烦在留言中指出，多谢！！！