cdn

1. cdn模式只建议在生产环境中使用,dev环境会导致vue dev tool 无法使用

   I. dev环境可以用vue.js 支持 devtools

   II. production 环境用vue.min.js

2. cdn 中文件的版本号要和dev环境中使用的版本号一致 否则可能会由于版本的不同导致生产上出现问题.(安全第一)

3. 注意选择靠谱的cdn (最好的方案是 oss+cdn)

配置需要cdn 的文件

cdn.js

 module.exports = [
    {
        name: 'vue',
        library: 'Vue',
        js: 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
        css: ''
    },
    {
        name: 'vue-router',
        library: 'VueRouter',
        js: 'https://cdn.jsdelivr.net/npm/vue-router@3.3.4/dist/vue-router.min.js',
        css: ''
    },
    {
        name: 'vuex',
        library: 'Vuex',
        js: 'https://cdn.jsdelivr.net/npm/vuex@3.5.1/dist/vuex.min.js',
        css: ''
    }
]

vue.config.js中加载

基本原理是将cdn.js 中的文件变成webpack 的externals 的配置项， name 是引入的包名， library 是全局变量。

import Vue from 'vue'  // import [library] from [name]

const cdnDependencies = require('./cdn')
// CDN 相关 可在配置文件中增加 VUE_APP_CDN 选项来打开或关闭cdn

const isCDN = process.env.VUE_APP_CDN == 'ON'
const externals = {}
cdnDependencies.forEach(pkg => {
    externals[pkg.name] = pkg.library
})
const cdn = {
    css: cdnDependencies.map(e => e.css).filter(e => e),
    js: cdnDependencies.map(e => e.js).filter(e => e)
}

module.exports = {
  configureWebpack: config => {
    if (isCDN) {
      config.externals = externals
    }
  },
// 使用 html-webpack-plugin
  chainWebpack: config => {
      // 使用cdn
      config.plugin('html').tap(args => {
        if (isCDN) {
           args[0].cdn = cdn
        }
        return args
      })
 
  }
}

代码处理

可以去掉 import [library] from [name] ,不去掉也没关系,不会打包进去的