本文主要介紹對第三方庫（如echarts、element-ui等）的打包優(yōu)化。
采用cdn加載需要聯(lián)網。
一、打包分析
1.1 速度分析
使用speed-measure-webpack-plugin插件可以讓我們知道各個模塊的耗時情況和打包總耗時
1.1.1 安裝
npm i -D speed-measure-webpack-plugin
1.1.2 vue.config.js配置
// 導入速度分析插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
// 實例化插件
const smp = new SpeedMeasurePlugin();
module.exports = {
configureWebpack: smp.wrap({
plugins: [
// 你使用到的其他插件
]
})
}
1.1.3 結果
打包總耗時為 25.4secs
圖1-1
項目啟動時，也可以看到啟動耗時
圖1-2
1.2 體積分析
webpack打包體積分析這里沒有用額外的插件，就使用了webpack自帶的。
圖1-3
1.2.1 package.json配置
在 package.json中添加一條命令：
"http://": "在/dist/report.html中查看webpack打包報告",
"report": "vue-cli-service build --report",
1.2.2 結果
執(zhí)行npm run report，生成的體積報告在/dist/report.html中
圖1-4
由此可見，第三方庫占比最大，因此采用CDN加載。
二、第三方庫使用 CDN 加載
為了方便以后管理，將CDN相關的所有配置寫入cdn.config.js(與vue.config.js同級)
2.1 cdn.config.js配置
module.exports = {
// 是否使用cdn
useCDN: true,
// key是'包名', value是靜態(tài)資源引入后全局的名稱 import Vue from 'vue'
externals: {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'axios': 'axios',
'echarts': 'echarts',
// 必須是ELEMENT，否則會報‘elementUI is not defined’
'element-ui': 'ELEMENT'
},
CDN: {
// CDN鏈接地址：https://www.jsdelivr.com/
css: [
'https://cdn.jsdelivr.net/npm/element-ui@2.15.3/lib/theme-chalk/index.css'
],
js: [
'https://cdn.jsdelivr.net/npm/vue@2.6.11',
'https://cdn.jsdelivr.net/npm/vue-router@3.2.0/dist/vue-router.min.js',
'https://cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js',
'https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js',
'https://cdn.jsdelivr.net/npm/element-ui@2.15.3/lib/element-ui.common.min.js',
'https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js'
]
}
}
2.2 vue.config.js配置
const isPRD = process.env.NODE_ENV === 'production';
// cdn相關配置
const cdnConfig = require('./cdn.config.js');
module.exports = {
pages: {
index: {
// page 的入口
entry: 'src/main.js',
// 模板來源
template: 'public/index.html',
// 在 dist/index.html 的輸出
filename: 'index.html',
// 當使用 title 選項時，
// template 中的 title 標簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: '系統(tǒng)名稱',
// 在這個頁面中包含的塊，默認情況下會包含
// 提取出來的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index'],
// 調用：htmlWebpackPlugin.options.CDN（設置CDN鏈接）
CDN: isPRD && cdnConfig.useCDN ? cdnConfig.CDN : null
}
},
configureWebpack: {
// 生產環(huán)境注入CDN
externals: isPRD && cdnConfig.useCDN ? cdnConfig.externals : {}
}
}
2.3 index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- 使用 CDN 的 CSS 文件 start -->
<% for (var i in htmlWebpackPlugin.options.CDN && htmlWebpackPlugin.options.CDN.css) { %>
<link href="<%= htmlWebpackPlugin.options.CDN.css[i] %>" rel="stylesheet">
<% } %>
<!-- 使用 CDN 的 CSS 文件 end -->
<!-- 使用 CDN 的 JS 文件 -->
<% for (var i in htmlWebpackPlugin.options.CDN && htmlWebpackPlugin.options.CDN.js) { %>
<script src="<%= htmlWebpackPlugin.options.CDN.js[i] %>"></script>
<% } %>
<!-- 使用 CDN 的 JS 文件 end -->
</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 -->
</body>
</html>
2.4 main.js修改
index.html已經引入了element.ui的css，所以這里不需要重復引入
// 引入element-ui組件庫
import ElementUI from 'element-ui';
// index.html已經引入了element.ui的css，所以這里不需要重復引入
// import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
2.5 結果
由圖2-1可知，采用了cdn加載后 打包總耗時由原來的25.4secs變?yōu)?code>14.75secs
圖2-1
由圖2-2可知，采用了cdn加載后 打包體積也變小了
圖2-2
圖2-3
由圖2-4可知，使用cdn加載的第三方庫沒有進行打包
圖2-4
2.6 可能遇到的問題
- 圖2-5的錯誤是cdn引用的element.ui鏈接問題：需要引入
lib/index.js文件(列如https://cdn.jsdelivr.net/npm/element-ui@2.15.3/lib/index.js)
圖2-5 - 圖2-6的錯誤是externals外部擴展的value值不對，應為
'element-ui': 'ELEMENT'
圖2-6
