前端性能优化

1.解决antd icon打包过大的问题

https://segmentfault.com/a/1190000019377791?utm_source=tag-newest

node_modules/@ant-design中icon有529kb

前端性能优化

resolve: {
    alias: {//设置别名是为了让后续引用的地方减少路径的复杂度
        // ../src/user-icons.js文件用户自定义,按需
        '@ant-design/icons/lib/dist$': path.resolve(__dirname, '../src/user-icons.js'),
        '@': path.resolve(__dirname, '../src')
    }
}

@ant-design/icons/lib/dist$意义:打包时会打包依赖ant-design-vue,然而ant-design-vue/es/index.js中引用了@ant-design/icons/lib/dist,代码如下:

前端性能优化

遇到@ant-design/icons/lib/dist用../src/icons.js代替,因此,本来依赖ant-design-vue要使用@ant-design/icons/lib/dist里面全部的icon,代替之后,只会打包user-icons.js中引入的@ant-design里面的部分icon,减小打包体积

  • 2.在src目录下编写user-icons.js,内容是使用到@ant-design里面的部分的icon
export { default as LeftOutline } from '@ant-design/icons/lib/outline/LeftOutline'
export { default as RightOutline } from '@ant-design/icons/lib/outline/RightOutline'
export { default as UpOutline } from '@ant-design/icons/lib/outline/UpOutline'
export { default as DownOutline } from '@ant-design/icons/lib/outline/DownOutline'
export { default as CaretDownOutline } from '@ant-design/icons/lib/outline/CaretDownOutline'
export { default as UserOutline } from '@ant-design/icons/lib/outline/UserOutline'
export { default as LockOutline } from '@ant-design/icons/lib/outline/LockOutline'
export { default as CalendarOutline } from '@ant-design/icons/lib/outline/CalendarOutline'
export { default as QuestionCircleOutline } from '@ant-design/icons/lib/outline/QuestionCircleOutline'
export { default as CheckCircleOutline } from '@ant-design/icons/lib/outline/CheckCircleOutline'
export { default as UploadOutline } from '@ant-design/icons/lib/outline/UploadOutline'
export { default as PlusCircleOutline } from '@ant-design/icons/lib/outline/PlusCircleOutline'
export { default as EditOutline } from '@ant-design/icons/lib/outline/EditOutline'
export { default as MinusCircleOutline } from '@ant-design/icons/lib/outline/MinusCircleOutline'
export { default as InfoCircleOutline } from '@ant-design/icons/lib/outline/InfoCircleOutline'
export { default as SyncOutline } from '@ant-design/icons/lib/outline/SyncOutline'
export { default as LoadingOutline } from '@ant-design/icons/lib/outline/LoadingOutline'

export { default as CheckCircleFill } from '@ant-design/icons/lib/fill/CheckCircleFill'
export { default as CloseCircleFill } from '@ant-design/icons/lib/fill/CloseCircleFill'
export { default as ExclamationCircleFill } from '@ant-design/icons/lib/fill/ExclamationCircleFill'

注:a.如果打包错误,请检查alias的配置和icons.ts的路径

b.user-icons.js的内容,包括自己用到的icon和组件用到的icon

项目实战:

问题1:为什么写@ant-design/icons/lib/dist$?答案看上面

问题2: LeftOutline 等icon在项目代码中没有找到哇???怎么知道我项目中引用了LeftOutline呢?

测试结果正确:没有了@ant-design板块了

前端性能优化

原文 

https://segmentfault.com/a/1190000021111410

本站部分文章源于互联网,本着传播知识、有益学习和研究的目的进行的转载,为网友免费提供。如有著作权人或出版方提出异议,本站将立即删除。如果您对文章转载有任何疑问请告之我们,以便我们及时纠正。

PS:推荐一个微信公众号: askHarries 或者qq群:474807195,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分析,高并发、高性能、分布式、微服务架构的原理,JVM性能优化这些成为架构师必备的知识体系。还能领取免费的学习资源,目前受益良多

转载请注明原文出处:Harries Blog™ » 前端性能优化

赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址