Open robinjl opened 4 years ago
Bongkai
commented
4 years ago 之前有尝试做过打包编译的优化，阶段结果是时间1min+，体积4M+。 你可以使用 webpack-bundle-analyzer 可视化插件对比你的项目和刚下载的 lin-cms 项目的体积区别，看是不是新引入的哪些开源项目导致体积异常增加。 按道理，只增加业务代码是不太可能增加7M的体积的，除非业务非常庞大复杂。 你还可以查看一下 antd 的使用优化说明，4.0版本的 antd 有些引入方法不正确是有可能造成体积激增的。
由于本人webpack技术一般，项目也只有我一个人开发维护，可能短时间内无法给出合适的优化方法。如果你之后有什么有效的优化方法，请提pr或者评论点拨一下，本人将不胜感激！
robinjl
commented
4 years ago @Bongkai 好的 谢谢回复 点拨谈不上 待我这边项目业务稳定后，有时间根据你提供的建议来查找原因，如果解决了，再在这里留言
Bongkai
commented
4 years ago 好的。这个项目就是用 create-react-app 搭建的，如果熟悉的话应该不难优化哈。
robinjl
commented
3 years ago 作者，你好
根据插件webpack-bundle-analyzer结果 我觉得可能是 antd 样式配置引起的
按照现有代码build
... { "libraryName": "antd", "libraryDirectory": "es", "style": true }
如果写成
... { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }
对比结果 |
style = true | style = css | |
|---|---|---|---|
| build 体积 | 14.9M | 8.1M | |
| build 时间 | 221s | 156s |
当然 主题变量 modifyVars antd 要求写成 less，所以要通过less-loader转译，按照 babel-plugin-import 文档还是得写作 style=true，否则 antd 引用组件也无法被自定义样式覆盖
问题是我在业务页面只是简单引用 import { Form, Input, Button, ... } from 'antd'
可以看到多数的业务文件都是增加了不少体积，所以还是不知道是哪个地方出了问题 或者如何配置 水平有限 目前就发现这点
Bongkai
commented
3 years ago 项目里使用 modifyVars 文件更改 antd 全局样式只是为了在 UI 上和 lin-cms-vue 保持一致，可以暂时使用 style = css 来减少打包体积，组件样式会趋向于 ant design pro；或者删减对你们项目没必要的全局样式，看能不能减少一些打包压力。
aQingYun
commented
3 years ago 主要是tingmce的体积较大，如果是首屏加载较慢可以动态加载，为了减少打包体积的话也可以放到cdn上，动态引入
作者，你好，感谢你分享的开源代码 我用这套开源代码用于项目中，随着不断开发，明显感觉到修改代码后，Webpack编译速度慢，调试的体验不如ant design pro 或 create react app 等脚手架 打包的时间较长 5min +, 体积 11M + 除了更新了ant design 4.6.6 没有其他大的改动，增加的基本是一些业务上的CRUD页面 Webpack 对一般前端不太友好，你自己写的webpack配置文件我没有详细去看，学习成本较高，请问可以做些优化或者给出一些建议吗？ 谢谢！