农村四月闲人少,勤学苦攻把名扬。这篇文章主要讲述create-react-app 打包后静态文件过大 webpack优化相关的知识,希望能为你提供帮助。
在最近的项目里,页面和静态文件并不是很多的情况下,打包后发现产出的静态资源却很大。
1.关掉sourcemap
文章图片
在config/webpack.config.js文件里,大概30几行的位置添加这样一句代码,这样做的作用是防止线上生成环境将源码一起打包部署。
2.将一些公共的库(比如antd)做一个缓存
文章图片
splitChunks: { chunks: \'all\', name: "vender", cacheGroups: { vender: { name: "vendor", test: /[\\\\/]node_modules[\\\\/]/, chunks: "all", priority: 10, enforce: true }, react: { name: "react", test: (module) => /react|redux/.test(module.context), chunks: "initial", priority: 11, enforce: true }, antd: { name: "antd", test: (module) => { return /ant/.test(module.context); }, chunks: "initial", priority: 11, enforce: true }, moment: { name: "moment", test: (module) => { return /moment/.test(module.context); }, chunks: "initial", priority: 13, enforce: true } } },
【create-react-app 打包后静态文件过大 webpack优化】
推荐阅读
- react-native配置在安卓模拟器上运行
- 报错 Error starting ApplicationContext 解决
- 设置fiddler捕获https和app抓包
- 论文阅读 | Ubicomp19 Apply Event Extraction Techniques to the Judicial Field
- FloatingActionButton 实现类似 闲鱼 App 底部导航凸起按钮
- 深入理解 Android 中的各种 Context
- 虚拟环境的基本使用 virtualenv,virtualenvwrapper
- 还在用逆向工程(太Low了,试试通用Mapper吧!)
- You are attempting to install the android sdk inside your android studio installation