阅读:68
首次进行组件库文档打包,遇到了一些ts打包报错和css打包警告,记录下处理过程。并且发现打包后的主包的体积过大,有一定优化空间
当时有好奇为什么开发环境下都不报错,构建才产生这么多ts错误。大致猜想可能vite在dev和build下对ts处理可能有点不一样。
翻查文档得知,vite仅执行.ts文件的转译,并不执行任何类型检查,(可以在构建脚本中运行 tsc --noEmit 或者安装 vue-tsc 然后运行 vue-tsc --noEmit 来对你的 *.vue 文件做类型检查)。详见这里
而项目进行构建时有采用vue-tsc进行类型检查,这才导致的构建下产生的ts检查报错。报错如图下
回到这次的错误,发现都是引用的三方包的.d.ts的报错,也无法进行他的代码修改
后续查阅ts文档得知可以添加配置skipLibCheck。跳过对声明文件(扩展名为 的文件.d.ts)的类型检查
俩种配置方式如下:
一、命令行写法
二、配置文件写法
报错原因:css编译,@charset 规则放在第一位,具体的原因与font-family有关
若是项目内的样式文件出来次问题,直接删除掉@charset "UTF-8";就可以了
但是呢,我项目中的报错是由于elementPlus组件库样式内部导致
报错如图下
考虑到也不能去改内部代码,最后只能在vite构建中进行处理。处理方式如下,在vite.config.js中添加
postcss: {
plugins: [
{
postcssPlugin: 'internal:charset-removal',
AtRule: {
charset: (atRule) => {
// 去除elementPlus内部charset警告
if (atRule.name === 'charset') {
atRule.remove()
}
}
}
}
]
}
vite.config.js配置如下:
import { defineConfig } from 'vite'
import { resolve } from 'path'
import vue from '@vitejs/plugin-vue'
import mdTovue from './plugins/md-to-vue'
import { visualizer } from 'rollup-plugin-visualizer';
const vuePlugin = vue({
include: [/\.vue$/, /\.md$/]
})
// https://vitejs.dev/config/
export default defineConfig({
resolve: {
alias: {
"@": resolve(__dirname, 'src'),
"@doc": resolve(__dirname, '../doc')
},
extensions: ['.js', '.jsx', '.ts', , '.tsx', '.vue', '.json']
},
css: {
postcss: {
plugins: [
{
postcssPlugin: 'internal:charset-removal',
AtRule: {
charset: (atRule) => {
// 去除elementPlus内部charset警告
if (atRule.name === 'charset') {
atRule.remove()
}
}
}
}
]
}
},
plugins: [mdTovue(), vuePlugin, visualizer(),
build: {
rollupOptions: {
output: {
manualChunks(id) {
//创建一个vendor包含所有依赖项的块node_modules
if (id.includes('node_modules')) {
return 'vendor';
}
}
}
}
}
})
打包输出信息如下:
dist/index.html 0.55 KiB
dist/assets/Home.1a264624.js 0.56 KiB / gzip: 0.38 KiB
dist/assets/RouterView.1afa8b53.js 0.21 KiB / gzip: 0.18 KiB
dist/assets/a-b.931af6d1.js 0.34 KiB / gzip: 0.26 KiB
dist/assets/test-component-config.1499331f.js 4.22 KiB / gzip: 1.23 KiB
dist/assets/button1.demo.c877ed30.js 0.74 KiB / gzip: 0.45 KiB
dist/assets/index.2f14ab82.js 15.11 KiB / gzip: 5.19 KiB
dist/assets/test-inlay-component-alert.33174b36.js 1.59 KiB / gzip: 0.60 KiB
dist/assets/test-inlay-component-badge.69bfc1dc.js 1.99 KiB / gzip: 0.58 KiB
dist/assets/test-demo-block.98518de7.js 12.86 KiB / gzip: 2.51 KiB
dist/assets/button3.demo.8c35a108.js 0.51 KiB / gzip: 0.29 KiB
dist/assets/test-inlay-component-code.bda31783.js 20.53 KiB / gzip: 2.30 KiB
dist/assets/test-inlay-component-embed.fdf24623.js 9.26 KiB / gzip: 1.52 KiB
dist/assets/button3.demo.0ebe20ba.css 0.02 KiB / gzip: 0.04 KiB
dist/assets/test-md-style.ba565816.js 8.15 KiB / gzip: 2.10 KiB
dist/assets/Home.ecf788d2.css 0.03 KiB / gzip: 0.05 KiB
dist/assets/index.d53f534c.js 5.37 KiB / gzip: 0.90 KiB
dist/assets/button1.demo.705272a3.css 0.05 KiB / gzip: 0.07 KiB
dist/assets/index.cd1300d0.css 8.71 KiB / gzip: 2.66 KiB
dist/assets/vendor.7f07dc58.css 287.55 KiB / gzip: 39.94 KiB
dist/assets/vendor.e3efb8ef.js 836.15 KiB / gzip: 273.28 KiB
(!) Some chunks are larger than 500 KiB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
Done in 18.47s.
Done in 18.71s.
优化目的一般针对打包体积和打包时间进行优化,
从输出信息来看:
注:ventor文件是从主包分离出node_modules中有引入的包,index.html依然会引入.因此后续的文章都放入主包中,不会有ventor文件。有较大的包单独抽离,如后续会说到的lodash
打包之后生成 stats.html,可以看到以下的图表
注意,图表中显示的包大小,是分了 chunk 但还没有压缩的时候的大小
分析图表得
原引入方式
export { cloneDeep, throttle, debounce } from 'lodash'
看到打包时vite的警告,有俩个方案可以实现lodash作为独立的 chunk 打包
(!) Some chunks are larger than 500 KiB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
import()动态导入
把引入方式改成:
export const { cloneDeep, throttle, debounce } = import('lodash/debounce')
确导致了ts报错,报错如下,所以排除这种方式
manualChunks
改回使用原引用方式
在vite.config.js添加
build: {
rollupOptions: {
output: {
manualChunks:{
lodash: ['lodash']
}
}
}
}
打包时输出
dist/assets/button3.demo.0ebe20ba.css 0.02 KiB / gzip: 0.04 KiB
dist/assets/lodash.7fef2bd5.js 71.15 KiB / gzip: 25.74 KiB
dist/assets/index.43bdfbd6.css 296.26 KiB / gzip: 42.19 KiB
dist/assets/index.0ed6b04b.js 773.51 KiB / gzip: 250.64 KiB
可以看到,vendor的内容添加进index包,并且lodash被单独出来了,可是loadsh的还是引入了全量包体积
因此继续优化
把引入方式改成:
export { default as debounce } from 'lodash/debounce'
export { default as throttle } from 'lodash/throttle'
export { default as cloneDeep } from 'lodash/cloneDeep'
打包时输出
dist/index.html 0.49 KiB
dist/assets/lodash.71f9f2ff.js 0.16 KiB / gzip: 0.10 KiB
dist/assets/Home.55980fa6.js 0.56 KiB / gzip: 0.38 KiB
可以看出从原先的71.15KiB减少至0.16KiB,我们的优化目的达到
另一种优化方案
也可以将lodash替换成lodash-es,就可以一行引入方式
export { cloneDeep, throttle, debounce } from 'lodash'
lodash-es为ES modules版本的库,可以依赖tree-shake优化,只打包使用到的函数
elementPlus的优化比较简单了,官方已提供优化方案
将原本的全量引入改为以下引入方式
首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件
npm install -D unplugin-vue-components unplugin-auto-import
然后把下列代码插入到你的 Vite 的配置文件中
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default {
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
}
优化后的打包输出
dist/index.html 0.49 KiB
dist/assets/lodash.71f9f2ff.js 0.16 KiB / gzip: 0.10 KiB
dist/assets/Home.0fe43fd0.js 0.56 KiB / gzip: 0.38 KiB
dist/assets/a-b.7a821a35.js 0.34 KiB / gzip: 0.27 KiB
dist/assets/test-component-config.ce0781d4.js 4.25 KiB / gzip: 1.24 KiB
dist/assets/button1.demo.abac5395.js 0.73 KiB / gzip: 0.44 KiB
dist/assets/el-radio.fbba7f78.js 6.30 KiB / gzip: 2.26 KiB
dist/assets/test-inlay-component-alert.36b60dd5.js 1.58 KiB / gzip: 0.60 KiB
dist/assets/test-inlay-component-badge.f317a91a.js 1.98 KiB / gzip: 0.58 KiB
dist/assets/test-demo-block.3829bc4f.js 16.33 KiB / gzip: 4.18 KiB
dist/assets/button3.demo.a5c9d79c.js 0.53 KiB / gzip: 0.30 KiB
dist/assets/test-inlay-component-embed.3b99ccfc.js 9.28 KiB / gzip: 1.54 KiB
dist/assets/test-inlay-component-code.cc047da1.js 20.55 KiB / gzip: 2.30 KiB
dist/assets/test-md-style.a10278e2.js 8.17 KiB / gzip: 2.11 KiB
dist/assets/Home.ecf788d2.css 0.03 KiB / gzip: 0.05 KiB
dist/assets/button1.demo.705272a3.css 0.05 KiB / gzip: 0.07 KiB
dist/assets/index.05ba647c.js 5.39 KiB / gzip: 0.91 KiB
dist/assets/button3.demo.0ebe20ba.css 0.02 KiB / gzip: 0.04 KiB
dist/assets/el-radio.507e2006.css 4.03 KiB / gzip: 0.90 KiB
dist/assets/index.0a06e46d.css 29.82 KiB / gzip: 6.20 KiB
dist/assets/index.fb562358.js 203.61 KiB / gzip: 75.47 KiB
Done in 17.59s.
Done in 17.84s.
可以看出主包(index.fb562358.js) 从原先的773.51KiB减少至203.61KiB,
就连主样式包(index.0a06e46d.css )也从原先的296.26 KiB减少至29.82 KiBKiB
通过打包分析,确认了以下因素导致vendor包过大(实际优化后,vendor包已移到主包中)
解决方案:
成果:
主包从844.66KiB 减少到 203.61KiB,体积减少了 75.8%
主样式包从296.26KiB 减少到 29.82KiB,体积减少了89.9%
构建过程耗时从 18.71S 减少到 17.84S,耗时减少了 4.6%