vue-cli

抽离大的第三方包

const { defineConfig } = require('@vue/cli-service')
let externals = {}
let cdn = {}

const isProd = process.env.NODE_ENV === 'production'

if (isProd) {
  // 如果是生产环境 就排除打包 否则不排除
  externals = {
    // key(包名) / value(这个值 是 需要在CDN中获取js, 相当于 获取的js中 的该包的全局的对象的名字)
    xlsx: 'XLSX',
    echarts: 'echarts'
  }

  cdn = {
    js: [
      'https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js',
      'https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js'
    ]
  }
}

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    externals
  },
  chainWebpack(config) {
    // 注入 cdn 变量
    config.plugin('html').tap((args) => {
      // cdn 属性名非固定，为对象自定义属性
      args[0].cdn = cdn
      return args
    })
  }
})

html引入

<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%=js%>"></script>
<% } %>