Vue项目优化,第三方JS用CDN引入

项目里用到的第三方插件比较多,打包时项目太大,之前是npm安装的,现在改为用CDN引入:
element-ui和echarts组件相对较大,主要对这两个进行优化。
在index.html页面里,vue要放在前面,不然element-ui会报错

<script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.4.11/index.js"></script>

在webpack.base.conf.js里

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

在main.js里

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

在需要引echarts的页面

import echarts from 'echarts'

最后打包,看看报告

npm run build --report
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值