vue-cli3+项目,按环境引入cdn资源

因为项目太大了,很多很大的依赖包,为了做优化,把大的包通过cdn的方式引入,但是正式服希望引入min.js,开发服希望直接引入非min的js,因为min版把一些报错和警告都去掉,不方便调试

需求:
①.期望使用min.js资源的服使用min.js的cdn资源
②.期望使用非min.js资源的服使用非min.js的cdn资源

一、查找.通过"webpack-bundle-analyzer"插件,查到到较大的依赖,就找对应的CDN资源引入

//vue.config.js下
//下载依赖 npm i -D webpack-bundle-analyzer
const openBundleAnalyzer = false;//是否打开bundle分析


configureWebpack:config=>{
	    if (openBundleAnalyzer) {
      const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
      plugins.push(new BundleAnalyzerPlugin(),)
    }
}

二、告诉webpack,哪些依赖我希望用cdn引入的方式处理

//vue.config.js下

//另外创建了一个维护cdn
const cdnConfig = require('./config/cdn.js');

  configureWebpack: config => {

    const externals = {};
    Object.keys(cdnConfig).forEach(key => {
      externals[key] = cdnConfig[key].name
    });
    config.externals = externals;

}

管理cdn,维护这里就够了

//cdn.js
module.exports = {
//以下是示例,需要引入什么,自己通过bundle分析判断
  "vue": {
    "name": "Vue",
    "cdn":{
      "css":{
        "default":"",
        "min":"",
      },
      "js":{
        "default":"https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js",
        "min":"https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js",
      },
    }
  },
  "quill": {
    "name": "Quill",//  "quill": "^1.3.6",
    "cdn":{
      "css":{
        "default":"https://cdn.bootcdn.net/ajax/libs/quill/1.3.6/quill.snow.min.css",
        "min":"https://cdn.bootcdn.net/ajax/libs/quill/1.3.6/quill.snow.min.css",
      },
      "js":{
        "default":"https://cdn.bootcdn.net/ajax/libs/quill/1.3.6/quill.min.js",
        "min":"https://cdn.bootcdn.net/ajax/libs/quill/1.3.6/quill.min.js",
      },
    }
  },
}

三、在webpack配置通过注入全局变量的方式,在index.html批量引入cdn资源

1.配置webpack,把需要通过cdn引入的css和js处理成数组并注册到全局变量中去,提供于index.html遍历

//vue.config.js下
const webpack = require("webpack");//4.x
const env = require("./src/config/currentEnviroment.js").env;
const isOnline = process.env.NODE_ENV === 'production';
//项目环境,项目有有暴露一个变量,去判断是开发环境,测试环境,还是正式环境,env的可能值是"dev"/"test"/"prod"
const cdnConfig = require('./config/cdn.js');
//哪些线上环境需要引入cdn的min.js,min.js,非min的资源拉取相对没min的快
const needCdnMinEnv=["prod","test"];

configureWebpack: config => {
	const cdnData = {css: [], js: [],};
    //如果现在的服是在列表里的,就是需要min.js的
    const isSetMinCdn = needCdnMinEnv.includes(env);
    //webpack的run server这种开发环境,是期望有调试可看的,所以不引入min
    const getKeyName = !isOnline?"default":( isSetMinCdn ? "min" : "default");
    Object.keys(cdnConfig).forEach(key => {
      if (cdnConfig[key].cdn.css[getKeyName]) {
        cdnData.css.push(JSON.stringify(cdnConfig[key].cdn.css[getKeyName]))
      }
      if (cdnConfig[key].cdn.js[getKeyName]) {
        cdnData.js.push(JSON.stringify(cdnConfig[key].cdn.js[getKeyName]))
      }
    });
	config.plugins=[
	  new webpack.DefinePlugin({
	  //通过该webpack内置的插件注入的变量会成为项目全局变量
        cdnData,
      }),
	]
}

2.在index.html遍历

//index.html

  <% for(var i in cdnData && cdnData.css) { %>
    <link rel="stylesheet" href="<%= cdnData.css[i] %>" >
  <% } %>

  <% for(var i in cdnData && cdnData.js) { %>
    <script  src="<%= cdnData.js[i] %>"></script>
  <% } %>

四、大功告成
1.需要变更cdn,维护cdn.js文件即可
2.需要把部分线上环境剔除min资源,维护vue.config.js的needCdnMinEnv变量即可