默认情况下，通过import导入的第三方依赖包，最终会被打包到同一个文件中，导致打包后文件体积过大的，可以配置打包策略，不对第三方组件进行打包，而是通过CDN方式引入第三方资源

    通过webpack的externals节点，配置并加载外部的CDN资源，凡是声明在externals中的第三方依赖包，都不会被打包，这样会显著降低打包后js文件的大小

    1. 修改vue.config.js文件，添加打包时排除项,格式为包名:导入的名称

      1. module.exports={
      2. // 如果打包文件资源路径没有dist
      3. publicPath: '',
      4. chainWebpack:config =>{
      5.  // 生产环境
      6.  config.when(process.env.NODE_ENV === 'production', config => {
      7.    config.entry('app').clear().add('./src/main-prod.js')
      8.    // 打包时排除以下第三方依赖包
      9.    config.set('externals', {
      10.      vue: 'Vue',
      11.      'vue-router': 'VueRouter',
      12.      axios: 'axios',
      13.      lodash: '_',
      14.      echarts: 'echarts',
      15.      nprogress: 'NProgress',
      16.      'mavon-editor': 'MavonEditor',
      17.    })
      18.  })
      19.  // 开发环境
      20.  config.when(process.env.NODE_ENV === 'development', config => {
      21.    config.entry('app').clear().add('./src/main-dev.js')
      22.  })
      23. }
      24. }

    2. 注释所有main-prod.js的所有css引入文件

    3. 编辑public下的index.html文件，将css资源和js资源通过cdn引入
    1. <!--icon图标样式-->
    2. <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/5.15.2/css/all.min.css" />
    3. <!--nprogress样式-->
    4. <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
    5. <!--vue.js-->
    6. <script src="https://cdn.staticfile.org/vue/2.6.11/vue.min.js"></script>
    7. ……
    1. cdn加速网站