如何打包发布减少包体积排除第三方？

1. 打包过程：从 main.js 开始出发，寻找项目中需要使用到的依赖，最终交由webpack进行打包

 2.我们是否需要把第三方的库全部打包到自己的项目中呢？

比如 elementUI 文件就很大，而且这类插件长期不需要我们进行更新，所以没有必要打包进来！

​3.思路

 实现打包发布减少包体积排除第三方

通过配置vue-cli把一些平常不需要用的包排除在打包文字之外。

例如:让 webpack 不打包 vue element 等等

1.先找到 vue.config.js， 添加 externals 项，具体如下

此选项作用, 告诉webpack排除掉这些包, 不进行打包

==一定要去修改掉引入Element用的变量名, 这里要匹配去替换==

==因为cdn里的源代码配置在ELEMENT这个变量上==

configureWebpack: {
  externals: {
    // 基本格式：
    // '包名' : '在项目中引入的名字'
    'echarts': 'echarts',
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'vuex': 'Vuex',
    'axios': 'axios',
    'dayjs': 'dayjs',
    'element-ui': 'ELEMENT',//一定要记得在项目里把element-ui的引入名改为ELEMENT
    'vue-quill-editor': 'VueQuillEditor',
    'vuex-persistedstate': 'createPersistedState'
  }
}

配置后再次运行 npm run build 打包生成的dist文件内存小很多

---

如何将第三方包用cdn管理