出於對網站性能的要求，有時候我們不希望一些比較大的第三方庫直接打包到最後的bundle中，而會選擇在打包的時候忽略他們，並直接使用CDN上面的資源。腳手架經過升級，cli4的相關配置都需要在vue.config.js這個文件中進行，如果你沒有這個文件請自己新建一個（與package.json同級）。
這裏我們首先配置configureWebpack的externals字段，把不需要打包的資源進行相應的配置。如下所示：
configureWebpack: {
externals: {
vue: "Vue",
"element-ui": "ELEMENT",
"vue-router": "VueRouter",
vuex: "Vuex"
}
}
這裏我們排除了vue,element-ui, vue-router和vuex。以打包忽略elemen-ui爲例,"element-ui" 指的是你import語句中import ElementUI from 'element-ui'中的'element-ui', "ELEMENT"是element-ui這個庫暴露出來的全局對象。這個對象你可以從cdn資源的源碼中找到或者根據需要引用的文件去node_modules文件夾下去尋找。下面我們從node_modules文件夾下的源碼找一下element-ui,vue-router和vuex暴露出的全局對象，以下是各源碼的截圖：
以後需要排除其他的三方庫或者插件的時候，大家可以自己去找暴露出來的全局對象了。
配置完externals之後我們還需要利用htmlWebpackPlugin的能力讓我們在打包的時候可以獲取我們需要的CDN資源數據。首先我們在vue.config.js定義一個存放cdn資源連接的對象cdn,如下所示：
const cdn = {
css: ["//unpkg.com/[email protected]/lib/theme-chalk/index.css"],
js: [
"//unpkg.com/[email protected]/dist/vue.min.js",
"//unpkg.com/[email protected]/dist/vue-router.min.js",
"//unpkg.com/[email protected]/dist/vuex.min.js",
"//unpkg.com/[email protected]/lib/index.js"
]
}
其次我們把cdn這個對象放入我們的入口配置裏，如下
pages: {
index: {
entry: 'src/main.ts',
template: 'public/index.html',
filename: 'index.html',
title: 'sass-admin',
chunks: ['chunk-vendors', 'chunk-common', 'index'],
cdn: cdn
}
}
這樣一來vue.config.js裏面的cdn配置就完成了，下面放送一下完整的vue.config.js代碼。
const cdn = {
css: ["//unpkg.com/[email protected]/lib/theme-chalk/index.css"],
js: [
"//unpkg.com/[email protected]/dist/vue.min.js",
"//unpkg.com/[email protected]/dist/vue-router.min.js",
"//unpkg.com/[email protected]/dist/vuex.min.js",
"//unpkg.com/[email protected]/lib/index.js"
]
}
module.exports = {
publicPath: '/',
productionSourceMap: process.env.NODE_ENV !== 'production',
devServer: {
port: 8077
},
chainWebpack: config => {
config.resolve.symlinks(true)
},
configureWebpack: {
externals: {
vue: "Vue",
"element-ui": "ELEMENT",
"vue-router": "VueRouter",
vuex: "Vuex"
}
},
pages: {
index: {
entry: 'src/main.ts',
template: 'public/index.html',
filename: 'index.html',
title: 'sass-admin',
chunks: ['chunk-vendors', 'chunk-common', 'index'],
cdn: cdn
}
}
}
做完這些之後，我們還需要在入口文件的html模板處加上生成css和js腳本的代碼，比如這裏的html模板位置就是'public/index.html'。
這裏比較簡單就直接放送完整的html模板代碼了，如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<% for (let i in htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
<% } %>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<% for (let i in htmlWebpackPlugin.options.cdn.js) { %>
<script
type="text/javascript"
src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"
></script>
<% } %>
</body>
</html>
其中
<%= VALUE %>用來做不轉義插值<% expression %>用來描述 JavaScript 流程控制。
這些用到了lodash template的語法 ，感興趣的朋友可以去了解更多內容，這裏不做展開。
做完這一切之後我們用打包分析工具分析一下配置完CDN前後bundle內容的變化。
配置cdn之前的分析圖：
配置cdn之後的分析圖：
通過對比,發現我們的chunk-vendors已經少了我們配置在CDN中的第三方資源，另一個直觀的比較就是打包後chunk-vendors 的資源大小，這裏不再展開。另一個重要的變化就是我們打包之後的html上也加上了相應的資源腳本，如圖所示：
把資源放在CDN上一方面可以減輕自己服務器的帶寬消耗（資源從別的服務器下載，而不是你自己的服務器），另一方面CDN上的資源一般是你不會輕易修改的，而且瀏覽器訪問之後還會緩存下來，用戶再次訪問就無需二次下載資源，網站後續的整體訪問速度就更快了，同時CDN還可以做加速。
cli4 配置CDN的介紹就到此結束了，如有疑問可與下方留言。