使用 @vue/cli
脚手架构建的 Vue 全家桶项目,默认配置下,打包后会把 vue
、vue-router
、axios
、vuex
、element-ui
、echarts
等公共库打包在一起,导致基础 chunk
、vendor
包体积特别大,有时一个文件能达到 3-5MB,这会大大影响首次加载速度。因此需要抽离第三方公共库,配合使用 CDN 加速。
一、前言
项目依赖:
1 | { |
案例:项目整体使用了 element-ui
,其中后台服务消费监控可视化引入了 echarts
,元数据表血缘关系图使用了 d3
和 dagre-d3
,这几个库本身体积就不小,打包到一起后体积更大。
二、优化配置
- 安装
html-webpack-externals-plugin
1 | npm i -D html-webpack-externals-plugin |
- 配置
vue.config.js
1 | const CompressionWebpackPlugin = require('compression-webpack-plugin') |
三、配置说明
- module :库名,也就是
package.json
中的包依赖名。 - entry :入口,有几种类型,
string | array<string> | object | array<object | string>
,可以设置 CDN 地址,如:https://cdn.tiven.cn/assets/js/vue.min.js
;也可以设置文件路径,如:dist/vue.min.js
,相对于项目的路径就是:node_modules/vue/dist/vue.min.js
。 - global :注册到
window
上的全局变量,注意不能配错,否则代码会报错。 - supplements :补充文件,在上边
element-ui
配置中,因为css
文件中依赖了大量的font
字体文件,所以在打包时需要把这些依赖文件根据相对路径复制到dist
对应的目录中。 - attributes :设置引用这些抽离出去包的
script
或link
标签的属性,defer
、async
、crossorigin
、global
等等,可以根据需要进行配置。
因为首页首次渲染不依赖 echarts
、d3
、dagre-d3
等第三方库,所以给 script 标签加上了 async
属性,脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行),这样可以不阻塞页面渲染,提升首屏加载速度,提高用户体验。
四、打包对比
使用 webpack-bundle-analyzer
生成打包报告,优化前如图所示:
优化后如图所示:
公共包被抽离出去,chunk
包总体积从 2.8MB 变成 670KB ,减小了 70% 多,优化效果很明显。
五、打包输出
打包后 dist 目录:
1 | dist/ |
打包后,会发现把这些抽离出去的包直接引入到 index.html
中,如下所示:
1 | <body> |
六、踩坑记录
element-ui
配置 externals
时,可能会遇到这样的报错:Uncaught ReferenceError: ElementUI is not defined at element-ui (external "ElementUI":1:1)
,这说明 element-ui
模块的 global
参数配置错了,在全局 window 上找不到,你可能配置的是 ElementUI、Element、element-ui,这些都是不对的。必须是 global: 'ELEMENT'
。
欢迎访问:天问博客
发布时间: 2022-11-28
最后更新: 2023-03-02
本文标题: Vue 打包优化之 externals 抽离公共的第三方库
本文链接: https://www.tiven.cn/p/edae9a97/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!