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优化的更多相关文章
- iOS学习——(转)解决iOS App打包后dSYM文件找不到的问题
dSYM文件缺失通常有两种情况**: 情况一:配置错误导致打包时没有生成dSYM文件 针对这种情况,通常是因为Project -> Build Settings下的Debug Informati ...
- 提高首屏页面加载速度,解决vue-cli打包后单个文件过大的问题
本教程是针对vue-cli3以上的版本,其实原理都大同小异,这个demo为vue-cli直接创建的项目,并在main.js中引入了echart.element-ui.lodash 首先看demo打包后 ...
- 深入 Create React App 核心概念
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...
- 如何扩展 Create React App 的 Webpack 配置
如何扩展 Create React App 的 Webpack 配置 原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...
- tap news:week5 0.0 create react app
参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...
- webpack打包的基础原理-打包后的文件解读
1.概念 本质上,webpack 基于node平台,利用 node 的各种api来实现 javascript 应用程序的一个静态模块的打包工具. 在打包过程中,构建依赖关系,并且实现模块引用预处理,以 ...
- 解决使用vue打包时vendor文件过大或者是app.js文件很大的问题
这篇文章主要介绍了使用vue打包时vendor文件过大或者是app.js文件很大问题的解决方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 第一次使用vue2.0开发,之前都是用的angu ...
- vue打包时,assets目录 和static目录下文件的处理区别(nodeModule中插件源码修改后,打包后的文件应放在static目录)
为了回答这个问题,我们首先需要了解Webpack如何处理静态资产.在 *.vue 组件中,所有模板和CSS都会被 vue-html-loader 及 css-loader 解析,并查找资源URL.例如 ...
随机推荐
- 微信小程序之猜拳游戏
---恢复内容开始--- 最近几天在学习小程序,看了网上的学习视频,于是自己捣鼓着做出了视频里面的小程序. 这是实现的效果图 一个小程序页面,一般有三个部分文件组成,index.js 这个文件里面放的 ...
- opencv利用svm训练
]]]]]])rand2 = np.array([[]]]]]])label = np.array([[]]]]]]]]]]])data = np.vstack((rand1]]])pt_data = ...
- (1)解锁 MongoDB replica set核心姿势
副本集Replica Set是一个术语,定义具有多节点的数据库集群,这些节点具有主从复制(master-slave replication) 且节点之间实现了自动故障转移. 这样的结构通常需要具有奇数 ...
- C#调用7z实现文件的压缩与解压
1.关于7z 首先在这里先介绍一下7z压缩软件,7z是一种主流的 压缩格式,它拥有极高的压缩比.在计算机科学中,7z是一种可以使用多种压缩算法进行数据压缩的档案格式.主要有以下特点: 来源且模块化的组 ...
- The command '/bin/sh -c unzip -o php-7.2.23-src.zip' returned a non-zero code: 1
Dockerfile 内容 #centos7 nginx php redis inotify FROM centos:7 MAINTAINER INFOBIRD RUN yum -y update & ...
- windows I/O设备
当外部设备连接到windows后,设备所连接到的集线器驱动程序将为设备分配硬件ID,然后Windows 使用硬件 Id 查找设备与包含设备驱动程序的驱动程序包之间最近的匹配项. 如果查找到,设备就可以 ...
- python继承简介
继承 是面向对象的三大特性之一 作用: 通过继承可以使一个类获取其它类中的属性和方法 使用方法: 在定义类时,可以在类名后的括号中指定当前类的父类(超类.基类.super) 这样子类(衍生类)就可以直 ...
- day6 相对定位:position:relative
相对定位:position:relative 特点:a.相对于自己原来位置的定位,以自己的左上角为基准. b.相对定位原来的位置仍然算位置,不会出现浮动现象. 以下为初始位置:(可以看出设置margi ...
- Flash 上下文管理
1.Local() 作用:为每个协程或线程创建一个独立的内存空间 储存格式: { 唯一标识: {'stack': []} } 代码 try: from greenlet import getcurre ...
- JS绘图
https://www.highcharts.com.cn/demo/highcharts/ 百度的Echarts https://www.echartsjs.com/zh/index.html