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

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. 【转】常见Java面试题 – 第一部分:非可变性(Immutability)和对象引用(Object reference)

    ImportNew注: 本文是ImportNew编译整理的Java面试题系列文章之一.请看此系列相关面试题.你可以从这里查看全部的Java面试系列. 一些比较核心的Java问题经常会用来考验面试者的J ...

  2. # go微服务框架kratos学习笔记六(kratos 服务发现 discovery)

    目录 go微服务框架kratos学习笔记六(kratos 服务发现 discovery) http api register 服务注册 fetch 获取实例 fetchs 批量获取实例 polls 批 ...

  3. VS2015发布WEB项目

    第一步:在打开的VS2015中,右击项目,在弹出的对话框中,点击“发布”. 第二步:配置发布的WEB项目. 1.为要发布的项目起个名称,一般和项目名称相同. 2.选择以文件系统发布. 3.设置相关配置 ...

  4. NameError:name ‘xrange’ is not defined

    原因: 在Python 3中,range()与xrange()合并为range( ). 我的python版本为python3.5. 解决办法: 将xrange( )函数全部换为range( ).

  5. Unity3D游戏开发培训

    Unity3D游戏开发培训 作者:Jesai 时间:2017-01-08 修改:2017-01-09 12:36:15 1         项目的构成 图1-1 如图1-1所示,Unity3D的项目构 ...

  6. requests请求

    requests:伪造浏览器请求 请求 1.get requests.get( url='', params={ 'k1': ''v1, 'k2': 'v2' } ) 即 url?k1=k2& ...

  7. python 面向对象-初识

    一.分类 1.面向过程 2.面向函数 3.面向对象 二.类和对象 1.宏关 类是抽象的,对象是具体的 2.实例化 类->对象 3.类的作用 1)实例化成对象 实例化的过程,创建self对象,调用 ...

  8. Java单体应用 - Markdown - 01.简介

    原文地址:http://www.work100.net/training/monolithic-markdown.html 更多教程:光束云 - 免费课程 简介 序号 文内章节 视频 1 概述 2 特 ...

  9. 力扣337——打家劫舍 III

    这一篇也是基于"打家劫舍"的扩展,需要针对特殊情况特殊考虑,当然其本质还是动态规划,优化时需要考虑数据结构. 原题 在上次打劫完一条街道之后和一圈房屋后,小偷又发现了一个新的可行窃 ...

  10. .net core webapi搭建(2)跨域

    Core WebAPI中的跨域处理 在使用WebAPI项目的时候基本上都会用到跨域处理 Core WebAPI的项目中自带了跨域Cors的处理,不需要单独添加程序包 如图所示 修改 Configure ...