【Vue CLI4】打包优化，通过externals配合cdn资源优化依赖项体积

打包优化前的体积：                                          

打包优化后的体积：

一、项目根目录创建vue.config.js，通过chainWebpack配置打包入口，这样我们就可以针对发布和开发两种模式使用不同的打包入口，具体代码如下：

module.exports = {
  chainWebpack: config => {
    // 发布模式
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')
    })
    // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }
}

二、在发布模式中使用externals

官方解释：（防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。

在发布模式中添加这个配置项（具体需要优化的依赖项请根据自身项目配置，我个小demo就用了vue、vue-router、axios、vant：

 config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        vant: 'vant'
      })