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

This topic created in 2293 days ago, the information mentioned may be changed or developed.

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

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

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

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

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

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

externals

CDN

组件库

茴字

11 replies • 2020-03-04 13:03:37 +08:00

nozer

Feb 27, 2020

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

randyo

Feb 27, 2020 via Android

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

shintendo

Feb 27, 2020

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

shintendo

Feb 27, 2020

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

redbuck

Feb 27, 2020

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

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

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

yhxx

Feb 27, 2020

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

yangxiongguo

Feb 27, 2020

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

Newyorkcity

Feb 27, 2020

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

yangxiongguo

Feb 27, 2020

@Newyorkcity

官网上的 cdn 例子就是这样

randyo

Feb 27, 2020 via Android

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

black11black

Mar 4, 2020

屑文档