为什么几乎所有 Vue 组件库都有 CDN 引入介绍，但就是不告知通过 CDN 引入后如何配合着用 webpack 的 externals 呢？

[Newyorkcity]

https://webpack.js.org/configuration/externals/

module.exports = {
  //...
  externals: {
    'element-ui': 'ELEMENT'
  }
};

比如这个例子里的ELEMENT,官方文档是查不到的，自己谷歌出来（谷歌出来的也有错误答案，一个一个试过去排除的）。

前段体积太大，优化的方法一大堆，我觉得用 webapck 的 externals 技巧直接在产品版本中不包含是最有效的。当然，可能仅仅针对我这种主要学后端，前端凑合用，服务器还是用学生优惠买的网速贼差的人来说？

那前端大牛到底是咋个优化的啊？

真的不是茴字整出无数写法的没必要之举么？

[nozer]

如果你是通过 cdn 的方式引入 vue，那就没别要在 webpack 里面配置了，直接用就可以了。 也不需要导入。 那就是个全局变量。

[randyo]

你用 CDN 引入就默认你 Vue 也是用 CDN 引入的呗。不然别人怎么知道你用什么打包工具，每个打包工具都有自己的文档，自己看就行了。

[shintendo]

大概因为这是 webpack 配置的范畴，element 相比其它库并没有什么特殊性，所以没必要在文档里说这个吧

[shintendo]

另外我很怀疑组件库放 externals 是不是利大于弊

[redbuck]

我记得 element 依赖 vue，你这样估计还得报错。

如果组件库 cdn 引，那它的依赖也必须 cdn 引，还得在它上面。

@shintendo 还是有点特殊的，Element 是关键字，所以 element-ui 暴露的全局关键字是全大写的

[yhxx]

这种直接去 window 上找吧，比搜出来一个一个试要快一点。。。
可能这种场景确实比较少吧，所以文档作者也不是很关注？

[yangxiongguo]

都用 CDN 了为什么不直接在 HTML 引入呢

[Newyorkcity]

@nozer
@yangxiongguo
啊？我确实直接在 index.html 中引入了，就是用 vue-cli 生成的最简单的项目的 public 文件下面的 index.html...
这样引入了之后可以直接用吗？就在 app.vue 中直接放一个<el-button>，在 import from elementui 这种语句不写的情况下？我记得我之前碰过壁用不来啊。。。

[yangxiongguo]

@Newyorkcity

官网上的 cdn 例子就是这样

[randyo]

其实如果用 CDN 引入了 element-ui，在 webpack 中的 externals 写一个'element-ui':'ELEMENT'就是告诉 webpack 打包的时候遇到 import xx from 'element-ui'的时候不要打包它的代码进来，你会自己 CDN 引入，并且暴露的全局名称为 ELEMENT，webpack 就只把 xx 变成 ELEMENT 而已，其他的都不做。

[black11black]

屑文档