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

最新推荐文章于 2025-05-19 14:50:45 发布

原创

最新推荐文章于 2025-05-19 14:50:45 发布 · 1.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js

本文介绍如何在Vue CLI3项目中根据环境（如开发和生产）选择性地引入CDN资源，包括min.js和非min.js。通过webpack-bundle-analyzer找出大体积依赖，然后在webpack配置中指定CDN引入，并使用全局变量在index.html中批量引入。变更CDN只需修改cdn.js，而切换资源类型则调整vue.config.js的needCdnMinEnv变量。

因为项目太大了,很多很大的依赖包,为了做优化,把大的包通过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
    }

最低0.47元/天解锁文章