1. 安装npm intall webpack-bundle-analyzer --save-dev
  2. 在 config/webpack.config.prod.js 文件(推荐)或 config/webpack.config.dev.js 中,添加
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  plugins: [
    ...
    new BundleAnalyzerPlugin()
  ]
}
  1. 运行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 打包分析的更多相关文章

  1. 使用create react app教程

    This project was bootstrapped with Create React App. Below you will find some information on how to ...

  2. 在 .NET Core 5 中集成 Create React app

    翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...

  3. react项目中引入了redux后js控制路由跳转方案

    如果你的项目中并没有用到redux,那本文你可以忽略 问题引入 纯粹的单页面react应用中,通过this.props.history.push('/list')就可以进行路由跳转,但是加上了redu ...

  4. 【React踩坑记四】React项目中引入并使用js-xlsx上传插件(结合antdesign的上传组件)

    最近有一个前端上传并解析excel/csv表格数据的需求. 于是在github上找到一个14K star的前端解析插件 github传送门 官方也有,奈何实在太过于浅薄.于是做了以下整理,避免道友们少 ...

  5. 【React踩坑记五】React项目中引入并使用react-ace代码编辑插件(自定义列表提示)

    最近有一个引入sql编辑器插件的需求,要求代码高亮显示,代码智能提示,以及支持自定义代码提示列表等功能.中途在自定义代码提示列表中由于没有相关demo,所以踩了一些坑,遂将其整理如下,以便日后查看. ...

  6. 深入 Create React App 核心概念

    本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...

  7. 在vue-cli搭建的项目中在后台mock接口中支持req.body和req.cookies

    在<vue-cli搭建的项目中增加后台mock接口>中实现了后台mock,但是前端post的t数据都要在mock的后台接口中使用req的接收数据事件获取http协议body中的数据. re ...

  8. 如何扩展 Create React App 的 Webpack 配置

    如何扩展 Create React App 的 Webpack 配置  原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...

  9. 在Android项目中引入MuPdf

    由于公司手机App要加入一个附件查看功能,需要查看PDF文件,在网上找了许多第三方工具,最后选择了MuPDF. 更多第三方工具可以查看大神总结的:http://www.cnblogs.com/poke ...

  10. 在vue-cli搭建的项目中增加后台mock接口

    用vue-cli搭建一个前端开发环境确实是极其方便,在写前端代码肯定也是少不了需要调用后台提供的业务接口进行前后端交互,特别在敏捷开发中,前后端都要提前确定业务接口并进行打桩,在开发过程中基本是没有现 ...

随机推荐

  1. html 相对路径 问题

    在jsp跳转servlet和servlet跳转jsp过程中,因为servlet和jsp在不同的目录下,所以直接跳转失败.下面是查阅网上的资料,简单的总结下相对路径的问题. 这种情况下index.jsp ...

  2. [转] ajax方法

    1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...

  3. day 68 增删改查 语法

    1 普通正则 2 分组正则 url(r'/blog/(\d+)/(\d+)',views.blog)     blog(request,arq1,arq2) 按照位置传参 3 分组命名 url(r'/ ...

  4. PMS5003ST+Arduino Nano OLED屏显示

    整合OLED显示和PMS5003报数 #include <Arduino.h> #include <pms.h> /////////////////////////////// ...

  5. 用户登陆代码py

    实现用户输入用户名和密码,当用户名为 seven 且 密码为 123 时,显示登陆成功,否则登陆失败! 实现用户输入用户名和密码,当用户名为 seven 且 密码为 123 时,显示登陆成功,否则登陆 ...

  6. Day10作业及默写

    1,继续整理函数相关知识点,写博客. 2,写函数,接收n个数字,求这些参数数字的和.(动态传参) def func(*number): sum=0 for num in number: sum+=nu ...

  7. Vue.js 2.0生命周期

    1.beforeCreate 组建实例刚被创建,属性和方法等都还没有 2.created         实例已经创建完成,属性已经绑定 3.beforeMount  模板编译之前 4.mounted ...

  8. HslCommunication组件库使用说明

    一个由个人开发的组件库,携带了一些众多的功能,包含了数据网络通信,文件上传下载,日志组件,PLC访问类,还有一些其他的基础类库. nuget地址:https://www.nuget.org/packa ...

  9. [转]内存分配malloc, new , heapalloc

    malloc,new,VirtualAlloc,HeapAlloc性能(速度)比较 http://www.cppblog.com/woaidongmao/archive/2011/08/12/1531 ...

  10. 【转载】 A* 寻路算法 (个人认为最详细,最通俗易懂的一个版本)

    原文地址: http://www.cppblog.com/christanxw/archive/2006/04/07/5126.html =============================== ...