在最近的项目里,页面和静态文件并不是很多的情况下,打包后发现产出的静态资源却很大。

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优化的更多相关文章

  1. iOS学习——(转)解决iOS App打包后dSYM文件找不到的问题

    dSYM文件缺失通常有两种情况**: 情况一:配置错误导致打包时没有生成dSYM文件 针对这种情况,通常是因为Project -> Build Settings下的Debug Informati ...

  2. 提高首屏页面加载速度,解决vue-cli打包后单个文件过大的问题

    本教程是针对vue-cli3以上的版本,其实原理都大同小异,这个demo为vue-cli直接创建的项目,并在main.js中引入了echart.element-ui.lodash 首先看demo打包后 ...

  3. 深入 Create React App 核心概念

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

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

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

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

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

  6. tap news:week5 0.0 create react app

    参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...

  7. webpack打包的基础原理-打包后的文件解读

    1.概念 本质上,webpack 基于node平台,利用 node 的各种api来实现 javascript 应用程序的一个静态模块的打包工具. 在打包过程中,构建依赖关系,并且实现模块引用预处理,以 ...

  8. 解决使用vue打包时vendor文件过大或者是app.js文件很大的问题

    这篇文章主要介绍了使用vue打包时vendor文件过大或者是app.js文件很大问题的解决方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 第一次使用vue2.0开发,之前都是用的angu ...

  9. vue打包时,assets目录 和static目录下文件的处理区别(nodeModule中插件源码修改后,打包后的文件应放在static目录)

    为了回答这个问题,我们首先需要了解Webpack如何处理静态资产.在 *.vue 组件中,所有模板和CSS都会被 vue-html-loader 及 css-loader 解析,并查找资源URL.例如 ...

随机推荐

  1. 百度地图开发API

    JavaScript API  http://lbsyun.baidu.com/index.php?title=jspopular

  2. Redis系列之----Redis的两种持久化机制(RDB和AOF)

    Redis的两种持久化机制(RDB和AOF) 什么是持久化    Redis的数据是存储在内存中的,内存中的数据随着服务器的重启或者宕机便会不复存在,在生产环境,服务器宕机更是屡见不鲜,所以,我们希望 ...

  3. 记录一下第一次用markdown写博客回滚过程

    前面写博客,一直用的是博客园的TinyMCE编辑器, 今天不知道哪根筋搭牢了,想试试用Markdown写. 于是在“选项”里面把默认编辑器修改为“Markdown”,鉴于本人有一定的Markdown基 ...

  4. js如何下载后台传过来的base64文件

    一.<a>标签的作用 相信大部分人都知道<a>链接再简单不过了,跳转嘛,跳转到另外一个页面,这谁不知道. 当然这这是一部分, <a> 标签定义超链接,用于从一个页面 ...

  5. 贪心 + DFS

    A New Year party is not a New Year party without lemonade! As usual, you are expecting a lot of gues ...

  6. 【 Tomcat 】tomcat8.0 基本参数调优配置-----(2)

    Tomcat 的缺省配置是不能稳定长期运行的,也就是不适合生产环境,它会死机,让你不断重新启动,甚至在午夜时分唤醒你.对于操作系统优化来说,是尽可能的增大可使用的内存容量.提高CPU 的频率,保证文件 ...

  7. MQ如何解决消息的顺序问题和消息的重复问题?

    一.摘要 分布式消息系统作为实现分布式系统可扩展.可伸缩性的关键组件,需要具有高吞吐量.高可用等特点.而谈到消息系统的设计,就回避不了两个问题: 1.消息的顺序问题 2.消息的重复问题 二.关键特性以 ...

  8. .Net core路由高级用法

    先说startup中的路由 这里是我们现在用的默认路由,但是在使用当中也有麻烦.总而言之 用的不爽. 使用属性路由:RouteAttribute特性 默认的HomeController下面的Index ...

  9. (转)宽字节编码类型的XSS

    今晚又看了一遍PKAV-心上的瘦子写的xss腾讯系列的例子,收获挺大的,其中对宽字节注入有了更深的了解,又查找了一些相关的资料,整理一下,以备以后查阅 参考文档: http://book.2cto.c ...

  10. xlwings excel(四)

    前言 当年看<别怕,Excel VBA其实很简单>相见恨晚,看了第一版电子版之后,买了纸质版,然后将其送人.而后,发现出了第二版,买之收藏.之后,发现Python这一编程语言,简直是逆天, ...