create-react-app 搭建的项目中,引入 webpack-bundle-analyzer 打包分析
- 安装
npm intall webpack-bundle-analyzer --save-dev - 在 config/webpack.config.prod.js 文件(推荐)或 config/webpack.config.dev.js 中,添加
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
...
new BundleAnalyzerPlugin()
]
}
- 运行
npm run build(推荐,这样只在打包时,打开分析网页;这个地方具体命令名,可在 package.json 文件中 scripts 部分修改)或npm run dev(每次运行这个命令,都会打开分析网页),打包分析页面:http://127.0.0.1:8888/ 。
scripts 部分,我修改成了:
"scripts": {
"dev": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom",
"analyze": "source-map-explorer dist/static/js/main.*"
},
create-react-app 搭建的项目中,引入 webpack-bundle-analyzer 打包分析的更多相关文章
- 使用create react app教程
This project was bootstrapped with Create React App. Below you will find some information on how to ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...
- react项目中引入了redux后js控制路由跳转方案
如果你的项目中并没有用到redux,那本文你可以忽略 问题引入 纯粹的单页面react应用中,通过this.props.history.push('/list')就可以进行路由跳转,但是加上了redu ...
- 【React踩坑记四】React项目中引入并使用js-xlsx上传插件(结合antdesign的上传组件)
最近有一个前端上传并解析excel/csv表格数据的需求. 于是在github上找到一个14K star的前端解析插件 github传送门 官方也有,奈何实在太过于浅薄.于是做了以下整理,避免道友们少 ...
- 【React踩坑记五】React项目中引入并使用react-ace代码编辑插件(自定义列表提示)
最近有一个引入sql编辑器插件的需求,要求代码高亮显示,代码智能提示,以及支持自定义代码提示列表等功能.中途在自定义代码提示列表中由于没有相关demo,所以踩了一些坑,遂将其整理如下,以便日后查看. ...
- 深入 Create React App 核心概念
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- 在vue-cli搭建的项目中在后台mock接口中支持req.body和req.cookies
在<vue-cli搭建的项目中增加后台mock接口>中实现了后台mock,但是前端post的t数据都要在mock的后台接口中使用req的接收数据事件获取http协议body中的数据. re ...
- 如何扩展 Create React App 的 Webpack 配置
如何扩展 Create React App 的 Webpack 配置 原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...
- 在Android项目中引入MuPdf
由于公司手机App要加入一个附件查看功能,需要查看PDF文件,在网上找了许多第三方工具,最后选择了MuPDF. 更多第三方工具可以查看大神总结的:http://www.cnblogs.com/poke ...
- 在vue-cli搭建的项目中增加后台mock接口
用vue-cli搭建一个前端开发环境确实是极其方便,在写前端代码肯定也是少不了需要调用后台提供的业务接口进行前后端交互,特别在敏捷开发中,前后端都要提前确定业务接口并进行打桩,在开发过程中基本是没有现 ...
随机推荐
- 10.Python-第三方库requests详解(二)
Requests 是用Python语言编写,基于 urllib,采用 Apache2 Licensed 开源协议的 HTTP 库.它比 urllib 更加方便,可以节约我们大量的工作,完全满足 HTT ...
- SpringMVC学习一
先看SpringMVC的视图解析 以及 摘录自http://www.cnblogs.com/HigginCui/p/5856780.html的架构解析 1.DisPatcherServlet:前 ...
- react 学习笔记 npm 命令
第一步: cnpm install --save react react-dom babelify babel-preset-react 第二步: 安装es2015 cnpm install babe ...
- QueryString中的加号变成空格解决方法
通过Request.QueryString["CheckItem"]的方式调用值的时候,数值中的加号“+”会转换为空格“ ” 例如传输“ABC+EFG”,就会取到“ABC EFG” ...
- Golang AES加密
package main import ( "crypto/aes" "crypto/cipher" "fmt" "os" ...
- 使用scrapy爬取dota2贴吧数据并进行分析
一直好奇贴吧里的小伙伴们在过去的时间里说的最多的词是什么,那我们就来抓取分析一下贴吧发文的标题内容,并提取分析一下,看看吧友们在说些什么. 首先我们使用scrapy对所有贴吧文章的标题进行抓取 scr ...
- Arrays.copyOfRange()
Comparable[] aux = Arrays.copyOfRange(arr,from, to); 复制数组arr, from下标开始, to下标结束. 但是不包括to. 所以复制代码为 Com ...
- HDU1166-敌兵布阵 (线段树)
题目传送门:http://acm.hdu.edu.cn/showproblem.php?pid=1166 敌兵布阵 Time Limit: 2000/1000 MS (Java/Others) ...
- IPFS的配置安装
目录 1. IPFS简介 2. IPFS本地环境安装 2.1 下载ipfs压缩包 2.2 安装 3. 项目配置 3.1 创建ipfs节点 3.2 修改节点默认存储空间 3.3 查看节点id 3.4 启 ...
- Python学习笔记第四周
目录 一.基础概念 1.装饰器 1.装饰器本质就是函数 2.实现装饰器知识储备 1.函数即变量 2.高阶函数 3.嵌套函数 例子 1.将一个函数名作为实参传递给另外一个函数 2.返回值为函数名 3.函 ...