Webpack---性能优化，chunk.vendors.js体积过大

资源加载优化
通过配置externals，来减少该体积

使用示例

webpack的默认打包机制会将我们项目中通过npm引入的js库全部打包成一个vendor.js文件
其实像vue.js 、vuex.js、vue-router.js这些外部库，基本不会变的，如果将它们独立出来单独加载就能利于浏览器的缓存机制，不用每次都重新加载这些库js，并且大大的减少了打包的vendor.js文件

module.exports={
    configureWebpack:congig =>{
        externals:{
            key: value
        }
    }
}

其中key是第三方依赖库的名称，同package.json文件中的dependencies对象的key一样。
value值应该是第三方依赖编译打包后生成的js文件，然后js文件执行后赋值给window的全局变量名称。（一定要写正确，不然会报错）
vue一定要在element-ui之前引入

const assetsCDN = {
  // webpack build externals（webpack构建外链）
  externals: {
    vue: "Vue",
    vuex: "Vuex",
    axios: "axios",
    "vue-router": "VueRouter",
	'xlsx': 'XLSX',
		'element-ui': 'ELEMENT',
	"echarts": "echarts" //主要是echarts很大
  },
  css: [],
  // https://unpkg.com/browse/vue@2.6.10/ (vue的cdn地址)
  js: [
    // vue的压缩js （也可以下载下来，改成本地文件访问；因为有时候这个镜像会在国外，我们国内访问的话慢或者访问不到。可以使用unpkg.com的国内镜像地址: unpkg.zhimg.com）
    "https://cdn.bootcss.com/vue/2.6.10/vue.min.js",
    "https://cdn.bootcss.com/vue-router/3.1.2/vue-router.min.js",
    "https://unpkg.com/axios/dist/axios.min.js",
    "https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js",
	"https://cdn.bootcdn.net/ajax/libs/xlsx/0.16.1/xlsx.min.js",
	"https://unpkg.com/element-ui@2.10.1/lib/index.js",
	"https://cdn.bootcss.com/echarts/4.1.0/echarts.min.js"
  ],
};

module.exports = {
  configureWebpack: {
    // 视为一个外部库，而不将它打包进来
    externals: assetsCDN.externals,
  },
  chainWebpack: (config) => {
    config.plugin("html").tap((args) => {
      args[0].cdn = assetsCDN;
      return args;
    });
  },
};

externals 使用场景

externals配置项用来告诉Webpack要构建的代码中使用了哪些不用被打包的模块，也就是说这些模版是外部环境提供的，Webpack在打包时可以忽略它们

所以说只要是用webpack构建的工程，当工程规模达到一定程度时，都有必要将体积较大的、基本无变动的第三方包处理为externals，以减小入口js文件的大小，缩短首屏加载时长；减小依赖包体积
但使用cdn—最大的问题就是不稳定