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 定義