CDN+Vue-Cli优化打包体积引发的对环境变量的迷思

需求： 在打包发布的时候，根据配置打包出将经常使用的库使用CDN的版本。

在vue-cli中，能够使用htmlPlugin配置生成的html模板文件，使用了cli中插值的能力，在模板中嵌入表达式，将预设的cdn的脚本标签添加到模板中，同时使用webpack的external功能将原本项目中间的库文件抽离。

html文件的模板：

<div id="app"></div>
    <% if(process.env.NODE_ENV==='production'&& process.env.VUE_APP_CDN ==='CDN'){htmlWebpackPlugin.options.cdn.js.forEach(function(item){ if(item){ %>
      <script type="text/javascript" src="<%= item %>"></script>
    <% }})} %>
<!-- built files will be auto injected -->
复制代码

vue.config.js:

// 生产环境配置cdn
const useCDN = process.env.VUE_APP_CDN ==='CDN'; // 是否开启CDN
const CDNWEB = "cdn.bootcdn.net/ajax/libs";
let cdn = {
	js: [
		`//${CDNWEB}/vue/2.6.10/vue.runtime.min.js`,
		`//${CDNWEB}/vue-router/3.0.3/vue-router.min.js`,
		`//${CDNWEB}/vuex/3.0.1/vuex.min.js`,
		`//${CDNWEB}/axios/0.20.0/axios.min.js`,
		`//${CDNWEB}/view-design/4.3.2/iview.min.js`,
		`//${CDNWEB}/echarts/4.8.0/echarts.min.js`,
	],
};

if (NODE_ENV === "production") {
	webpackConfig["chainWebpack"] = (config) => {
		config.plugin("html").tap((args) => {
			args[0].cdn = cdn;
			return args;
		});
	};
	webpackConfig["configureWebpack"] = (config) => {
		if (useCDN) {
			config["externals"] = {
				vue: "Vue",
				vuex: "Vuex",
				"vue-router": "VueRouter",
				axios: "axios",
				"view-design": "iview",
				iview: "ViewUI",
				'echarts':'echarts'
			};
		}
   } 
}        
复制代码

官方文档在客户端侧代码中使用环境变量里面说：

除了 VUE_APP_* 变量以外，在你的应用代码中始终可用的还有两个特殊的变量：

• NODE_ENV - 会是 "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。
• BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。

看上面的说明，默认添加了NODE_ENV和BASE_URL，别的挂在process.env上面的变量在打包到客户端的时候，是不起做用的，所以添加CDN的flag须要以VUE_APP_开头。

挂载上以后，使用vue inspect > out.js，能够看到，添加了一个常驻的变量：

plugins:[
    new DefinePlugin(
      {
        'process.env': {
          NODE_ENV: '"development"',
          // 添加了新的变量
          VUE_APP_CDN: '"CDN"',
          BASE_URL: '"/"'
        }
      }
    ),  
]
复制代码

这样配合添加的.env文件，就能够实现配置打包的时候选择是否使用CDN模式。

使用.env.cdn这样的环境配置的时候，若是是打包也须要在这个文件中添加NODE_ENV=production

VUE_APP_CDN = CDN
NODE_ENV = production
复制代码

不添加的话，由于我使用的打包方式是： vue-cli-service build --mode cdn，这样注入环境变量，不添加NODE_ENV的话就会按照``vue-cli-service build --mode development`打包生成一个app.js文件了。

这样一来，配合gzip等手段，打包尺寸大下降。

// 以前（统计stat size）
All (5.18 MB)
js/chunk-vendors.849a5738.js (5.1 MB)
js/app.f17827af.js (75.19 KB)
// parsed size
All (1.56 MB)
js/chunk-vendors.849a5738.js (1.52 MB)
js/app.f17827af.js (35.36 KB)
// gzip size
All (476.98 KB)
js/chunk-vendors.849a5738.js (469.66 KB)
js/app.f17827af.js (7.32 KB)

// cdn 以后
All (119.18 KB)
js/app.2e115181.js (75.19 KB)
js/chunk-vendors.aedee448.js (43.99 KB)
// parsed size
All (54.01 KB)
js/app.2e115181.js (35.54 KB)
js/chunk-vendors.aedee448.js (18.46 KB)
// cdn gzip size
All (14.42 KB)
js/app.2e115181.js (7.39 KB)
js/chunk-vendors.aedee448.js (7.03 KB)
复制代码

stat size parsed size 定义