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.例如 ...
随机推荐
- Spring循环依赖的解决
## Spring循环依赖的解决 ### 什么是循环依赖 循环依赖,是依赖关系形成了一个圆环.比如:A对象有一个属性B,那么这时候我们称之为A依赖B,如果这时候B对象里面有一个属性A.那么这时候A和B ...
- C++生成dll以及调用(函数)和类
C++新手,方法可能有很多,此方法仅仅是自己实验并可行,详细步骤如下: 生成dll文件和lib文件: (1) 新建项目-windows桌面向导,选择动态链接.dll以及空项目: (2)复制代码(头文件 ...
- arthas 使用指导
arthas 阿尔萨斯 这种命令行的东西首先得知道 如何使用帮助,帮助文档最先开始用的,应该是可以在网上找到的官方文档 文档一:https://alibaba.github.io/arthas/ind ...
- Spring学习记录2——简单了解Spring容器工作机制
简单的了解Spring容器内部工作机制 Spring的AbstractApplicationContext是ApplicationContext的抽象实现类,该抽象类的refresh()方法定义了Sp ...
- vue基础中的注意事项,以及一些学习心得
vue中你不知道的东西.以及注意事项 v-html 使用 v-html的时候该指令中的值会覆盖绑定标签中原有的值,且使用v-html的时候不要将他设置为给用户提供内容的地方,因为v-html很容易被X ...
- 今天我的jupyter notebook打不开了,报错原因'No module named 'zmq.eventloop'
今天我的jupyter notebook打不开了,就是那种一打开出现黑色界面就退出的那种,惊恐爬上了我的面颊. 找了一个小时,试了好几种办法(包括别人说的什么把属性里面后面的%%的去掉)终究无果 打开 ...
- 关于<Java 中 RMI、JNDI、LDAP、JRMP、JMX、JMS那些事儿(上)>看后的一些总结-1
原文地址:https://www.anquanke.com/post/id/194384#h3-3 1.java rmi 关于rmi客户端和服务端通信的过程,java的方法都实现在rmi服务端,客户端 ...
- synchronized底层实现
1.锁升级的过程 当多个线程同时竞争一个对象监视器时:当前对象结构中的mark word中是否是当前线程id,如果是则当前线程获得偏向锁. 如果不是,则通过CAS将当前线程id置换到mark word ...
- thinkphp快速入门(学习php框架及代码审计)
之前想学习php代码审计,但是没有坚持下去,记得当时看到了很多CMS框架采用MVC架构,就嘎然而止了. 为了深入学习下框架,一边看着thinkphp官方文档,一边写个简单的登陆注册页面以加深理解. 官 ...
- linux下误清用户/home下的文件怎么办?
2016-08-19 10:38:10 有时候我们不小心把home目录下的用户目录删除了,出现上图情况,每行开头直接变成-bash-3.2$这种形式而不是[lyp@centos7 ~]$这种,这时 ...