vue打包后文件过大设置externals

Question

1.问题描述： 项目执行npm run build后发现打包文件很大 为解决问题采用cdn配合 webpack的externals功能将某些特定文件不予打包！现阶段问题是是 v-chart这个库容量很大 但是 把他设置到externals里打包后 文件容量也没有丝毫变化好像没有生效一样

2.代码

if (isProduction) {
      config.externals = {
        'vue': 'Vue',
        'echarts': 'echarts',
        'VCharts': 'v-charts',
        'element-ui': 'ELEMENT'
      }
      
      

3我在页面手动删除 import VCharts from 'v-charts' 打包后 容量直接从1.5M变成 400k 请问这种情况如何处理谢谢大家了

Answer 1

v-charts按需引入
import VeLine from 'v-charts/lib/line'
另个element-ui也可以做到按需引入的

Answer 2

externals 打包 与你项目中 import 无关，项目中该怎么写怎么写

其次 externals 要 在你的 index.html 中引入，<script src='需要的js' crossorigin="anonymous"></script>
不这样的话，会找不js文件,这里你可以找一些cdn 比如说目前的 75cdn

最终 他是要把cdn的 js 代码导入到 你项目中去
所以要看 他在浏览器下是什么 名字

很明显 这个 v-chart 是这样的
所以

 config.externals = {
        'vue': 'Vue',
        'echarts': 'echarts',
        'v-charts': 'VeChart',
        'element-ui': 'ELEMENT'
      }

前者是被导入库的名字，后者是 在浏览器 window下的名字
因为 webpack看到了前者，就不会把库导入进去
webpack看到了 后者，则会使用window 下的 这个对象或者函数

实质上，就是 把 js 放在页面上 导入，而不是全部打包到你的项目中去