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

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. a标签点击触发 layer open 只显示背景解决

    问题:公司网站突然说有个查看信息的点击不好使了,有时候点击无反应,但是href执行了,有时候弹出只有背景,不显示内容.网上找了a标签的各种方法尝试后,均不能解决. 代码:类似如下,method()方法 ...

  2. 配置IDEA默认作者@author

    IDEA安装目录下,使用文本编辑器打开~/bin/idea64.exe.vmoptions文件 在最后添加:-Duser.name=Your name 保存重启IDEA,Done

  3. 2次方的期望dp

    某一天WJMZBMR在打osu~~~但是他太弱逼了,有些地方完全靠运气:(    我们来简化一下这个游戏的规则    有n次点击要做,成功了就是o,失败了就是x,分数是按comb计算的,连续a个com ...

  4. SpringCloud之Eureka(服务注册和服务发现基础篇)(二)

    一:Eureka简介 Eureka是Spring Cloud Netflix的一个子模块,也是核心模块之一.用于云端服务发现,一个基于REST的服务,用于定位服务,以实现云端中间层服务发现和故障转移. ...

  5. java架构之路(多线程)JUC并发编程之Semaphore信号量、CountDownLatch、CyclicBarrier栅栏、Executors线程池

    上期回顾: 上次博客我们主要说了我们juc并发包下面的ReetrantLock的一些简单使用和底层的原理,是如何实现公平锁.非公平锁的.内部的双向链表到底是什么意思,prev和next到底是什么,为什 ...

  6. FreeRTOS低功耗模式

    在系统或电源复位以后,微控制器处于运行状态.当CPU不需继续运行时,可以利用多种低功耗模式来节省功耗,例如等待某个外部事件时,用户需要根据最低电源消耗,最快速启动时间和可用的唤醒源等条件,选定一个最佳 ...

  7. 20190925Java课堂记录(一)

    判断字符串是否回文 设计思想 利用递归,每次返回长度减二的字符串,最终返回结果 源程序代码 import java.util.Scanner; public class palindrome { st ...

  8. git 控制版本

    git:版本控制工具 1.进入想要进行版本控制项目的文件夹内 2.右击->Git Bash Here 3.初始化 git init 会多出一个.git隐藏文件夹 4.查看文件状体 git sta ...

  9. CSS盒子模型与双飞翼布局

    盒子模型&双飞翼实现 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin).边框(border).内边距(padding).实际内容(content)四个属性. ...

  10. codeforces 1278F - Cards(第二类斯特林数+二项式)

    传送门 解题过程: \(答案=\sum^n_{i=0}*C^i_n*{\frac{1}{m}}^i*{\frac{m-1}{m}}^{n-i}*i^k\) 根据第二类斯特林数的性质\(n^k=\sum ...