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/[email protected]/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
1
ysc3839 2019-04-02 14:18:16 +08:00 1
你把最终编译好的 js 整个放到 CDN 不就好了吗?
|
2
HarryQu OP |
3
anmie 2019-04-02 14:49:14 +08:00
噫。。。为啥我也这样做的 没问题呢,该有的提示还都有
|
4
bestie 2019-04-02 15:03:29 +08:00 1
单个文件太大可以分包。
最终编译的 js 肯定要全放 cdn 的,按照你这样来处理的应该不会很多。 |
5
momocraft 2019-04-02 15:08:43 +08:00
加到 devDeps ?
|
6
BearD01001 2019-04-02 15:13:46 +08:00 via iPhone 1
楼主可以参考一些还在使用 jQuery 的过渡项目,是可以不打包某些依赖使用 external 资源的。
|
7
BearD01001 2019-04-02 15:18:40 +08:00 via iPhone
搜索关键字:webpack externals
|
10
momocraft 2019-04-02 15:30:03 +08:00 1
哦看漏了
为什么要在 main.js 中移除,我猜 webstorm 是看这个的 external 的意思是 "即使 import 了也不打包" |
11
HarryQu OP |
13
HarryQu OP 最终的解决方法使用了这个哥们的方案 :
https://github.com/HaoChuan9421/vue-optimization/tree/cdn 在 cdn 分支 我打出的包很大, 与以下几个 js 库有关 : element-ui highlight.js moment 可运行命令查看项目使用的 js 占用空间:npm run build --report 优化后,实现了秒开,谢谢楼上各位的意见。 |