转载

前端性能优化

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

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

node_modules/@ant-design中icon有529kb

前端性能优化

1.webpack配置alias

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

正文到此结束

所属分类： Java 编程技术

本文标签： tag 测试 dist 性能优化 web 代码 IO 目录 UI 1111 配置 mmm http js src https node lib
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二