前端性能优化-依赖包引用cdn(减小构建包体积)
#webpack配置依赖引用cdn
####场景
大家在利用构建工具进行应用最后的打包过程中，我们希望做到的是将业务代码和第三方引用模块代码分开打包.
因为第三方引用模块代码通常很大，而且在不引入新的模块之前基本上是不会变动的。所以我们需要将这部分独
立打包，并利用浏览器的缓存去提高应用程序的首屏加载速度。
####vendor.js介绍
webpack 打包后会在build过程中产生Runtime的部分（运行时的一部分代码）会被添加进入vendor.js, 本文主要针对vendor.js进行优化
####webpack配置 首先需要在/build/webpack.base.conf.js中，配置externals节点
// externals中的key是后面需要require的名字，value是第三方库暴露出来的方法名
module.exports = {
//...
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'axios': 'axios',
'element-ui': 'Element',
'qs': 'Qs'
}
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
第二步修改入口文件(main.js)中的引入依赖语句
在/src/main.js或/src/router/index.js中，移除上面与之相关的import引入，改为require方式引入（使用require方式引入，无需使用Vue.use()安装）
// /src/main.js
// 使用包引入import方法
import Vue from 'vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI)
// cdn配置使用require
const Vue = require('vue')
const ElementUI = require('element-ui')
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
第三步在/index.html中，通过CDN引入相应的js文件和css文件(CDN地址：https://www.bootcdn.cn) 选用unpkg来作为第三方提供.如我想要axios包则输入网址为 https://unpkg.com/axios/ (末尾加斜杠代表你要查询该库的所有版本列表).然后你可以选择对应的版本如https://unpkg.com/axios@0.18.0/index.js 。其中 @0.18.0为库的版本号，若不写则默认最新版本.
<!--index.html-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="https://cdn.bootcss.com/element-ui/2.3.8/theme-chalk/index.css" rel="external nofollow" rel="stylesheet">
<title>配置webpack中externals来减少打包后vendor.js的体积</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
上次更新: 2022/05/05, 17:47:41