利用cdn缓存优化打包体积，并且还可以使用正常import去导入

原因：

webpack 默认会将使用的模块全部打包成本地文件，如果想要减少包的体积，可以做一些优化处理。

除了使用代码拆分（code split）优化打包，也可以使用 CDN，减少打包的内容。这里使用CDN的方式。

webpack 的 externals 配置可以将指定的第三方库移除打包清单，减少打包时间和体积，但又不影响使用模块化的方式导入第三方库，例如 import。

例如，使用 CDN 引入 axios，依然使用 import axios from 'axios' 的方式导入。

首先，利用 cdn 引入第三方库：

去cdn.js中找到需要的axios链接，注意不要引入common.js规范的链接，也可以查看源码，开头会判断环境、哪种module模式这些：

然后，在模板文件 /public/index.html 中添加 CDN 引入： 

接着，在vue.config.js中配置：

 

 从源码中找到cdn导出的全局变量名：

这样就可以在需要axios的页面如request.js直接引入 axios：

import axios from 'axios'

如果需要全局注册的第三方库，需要在main.js中引入使用并注册，比如router，element-ui（element-ui也用cdn引入的话就不能按需引入了，属于全部引入），这里以router为例： 

前面步骤一样，vue.config.js的配置：

 

 

然后还要在mian.js中全局注册才能在其他组件直接使用：

import router from 'router'

Vue.use(router)

new Vue({
    
    router,

    store,

    render: h => h(App),

    created: () => {

    store.commit('addMenu', router)

  }

}).$mount('#app')

 其实就是引入了一个包，想在哪里用想怎么用都行。