我做react 开发时通常是直接用的 create-react-app。最近想分析一下一个用 create-react-app 开发的项目的打包结果,看看有没有什么可以优化的地方。 项目情况 执行npm run eject导出配置(单向操作,不可逆)。 项目中使用的一些库: "dependencies": { "antd": "^3.9.2", "axios": "^0.18.0", "echarts":...
在使用react-create-app搭建的项目,在我们编译打包时会产生很多.map文件,导致编译后的项目非常大,这个配置就是让打包后的文件不包含.map文件 3、使用动态路由,需要时再加载(首屏加载2s,优化至1s) 创建一个component函数 (目的就是为了将router的component实现异步加载。) functionasyncComponent(getComponent){returnclas...
const Login= asyncComponent(()=> import(/*webpackChunkName:'Login'*/"../pages/Login/index"))//中间的注释可以让webpack按照这个名字打包 便于分辨 //loadable.jsimport React from'react'import Loadable from'react-loadable'import { Button, Result, Spin } from'antd'import store from'@store/store...
1.缩小打包后的体积(减少至300K左右) 2.将打包后的文件夹上传至腾讯云COS 项目说明 项目是使用Create-React-app创建的,没有进行eject操作,所以需要使用react-app-rewired与customize-cra覆盖默认的配置。 项目使用的是antd@3.x版本,对于antd icon没有实现按需加载,虽然在antd@4.x中修复了这个问题,但是迁移组件库的...
使用react做项目,一定离不开create-react-app这个项目,因为该项目是facebook专门打造的为准备使用react功能的开发,制作的脚手架项目,项目中集成了bable(转译器),webpack打包工具等插件。 但是,在公司项目使用create-react-app却出现了项目性能低的问题。具体表现为,每次编译都要半分钟甚至一分钟。打包接近20分钟。极为...
这是对现有的项目基于create-react-app做的优化 如果项目中使用了yarn eject 这种方式把配置暴露出来了,可以参考其他文章基于webpack做一些优化 使用@craco/craco来重写webpack配置 安装此插件 yarn add @craco/craco -D 更改package.json中的script指令
执行npm run eject命令会将react-scripts释放到本地项目中,可以通过修改对应的文件完成配置。同时会删除react-scripts依赖包,修改package.json中命令。命令执行完毕以后,我们就会看到本地项目中多出了scripts和config两个目录文件。同时,package.json文件命令也被修改了。
首先我是基于create-react-app来打包我们的UI库的,因为比较方便简单,当然我们也可以使用自己搭建的webpack来实现这一过程。 1.通过create-react-app快速启动一个项目: 代码语言:javascript 代码运行次数:0 复制 Cloud Studio代码运行 npx create-react-app alex_xucd alex_xunpm start ...
npm install -g create-react-app 二、创建应用 //create-react-app是全局命令来创建react项目create-react-appreact-demo 三、自定义webpack配置 npm run eject //自定义模式,暴露出webpack配置,不可逆 四、着手自定义webpack配置。 目录结构: 当然webpack升级准备,调整create-react-app的目录结构已符合我们项目...
React 本身只是一个库,它不规定如何使用路由或数据获取,Create React App 也没有。不幸的是,这意味着单靠 React 和最初设计的 Create React App 都无法解决这些问题。服务端渲染和静态生成、数据获取、打包和路由都是相关联的。当 Create React App 发布时,React 还很新,如何让这些功能独立工作都还有很多东西需要...