三、webpack优化之第三方库使用 CDN 加载(vue)
2021-10-20 本文已影响0人
YiYaYiYaHei
本文主要介绍对第三方库（如echarts、element-ui等）的打包优化。
采用cdn加载需要联网。
一、打包分析
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中添加一条命令：
"//": "在/dist/report.html中查看webpack打包报告",
"report": "vue-cli-service build --report",
1.2.2 结果
执行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是静态资源引入后全局的名称 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: '系统名称',
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index'],
// 调用：htmlWebpackPlugin.options.CDN（设置CDN链接）
CDN: isPRD && cdnConfig.useCDN ? cdnConfig.CDN : null
}
},
configureWebpack: {
// 生产环境注入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变为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
