js 放到 cdn 上后，开发环境下编译器警告，如何处理 ？

[HarryQu]

起因

Vue 打包后 vendor.js 太大，因此我准备将一些 js 放到 CDN 上。

---

过程

如 element-ui , 我在 webpack.base.conf.js 配置如下：

  externals: {
    'vue': 'Vue',
    'element-ui': 'ELEMENT'
  }

index.html 添加了 :

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

main.js 中移除了相关导入 ，如下三行，已全部移除

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

---

问题

上述配置后，生产环境确实是使用了 CDN。但是这样配置后，我在开发环境下，IDE 却无法智能提示，比如我有一个 HomeContainer.vue 中使用了 ElementUI 的组件 ，结果如下图 ：

或者在 html 文件中

没有提示重影响开发，因此我想在开发环境使用 npm，生产环境使用 CDN，应该如何配置？

注 ：IDE 为 webstorm

[ysc3839]

你把最终编译好的 js 整个放到 CDN 不就好了吗？

[HarryQu]

@ysc3839 也可以，写个脚本上传到 CDN，然后自动替换掉 index.html 的 路径。

我看网上大多是用帖子描述的方法，只是好奇他们怎么处理？

[anmie]

噫。。。为啥我也这样做的 没问题呢，该有的提示还都有

[bestie]

单个文件太大可以分包。
最终编译的 js 肯定要全放 cdn 的，按照你这样来处理的应该不会很多。

[momocraft]

加到 devDeps ？

[BearD01001]

楼主可以参考一些还在使用 jQuery 的过渡项目，是可以不打包某些依赖使用 external 资源的。

[BearD01001]

搜索关键字：webpack externals

[HarryQu]

@anmie 你也用的是 webstorm 吗

[HarryQu]

@bestie 哦，我之前的想法是：不经常变化的 JS 包走 CDN，经常变化的直接走自己的服务器。。

[momocraft]

哦看漏了
为什么要在 main.js 中移除，我猜 webstorm 是看这个的
external 的意思是 "即使 import 了也不打包"

[HarryQu]

@momocraft
@anmie
我新建了一个项目 https://github.com/ilpanda/vue.git ，这个项目这样配置，webstorm 也是无法提示 。

[anmie]

@HarryQu 我用的 vscode

[HarryQu]

最终的解决方法使用了这个哥们的方案 ：
https://github.com/HaoChuan9421/vue-optimization/tree/cdn 在 cdn 分支

我打出的包很大， 与以下几个 js 库有关 ：

element-ui
highlight.js
moment

可运行命令查看项目使用的 js 占用空间：npm run build --report

优化后，实现了秒开，谢谢楼上各位的意见。