react打包静态资源太大

2024-09-06

create-react-app 打包后静态文件过大 webpack优化

在最近的项目里,页面和静态文件并不是很多的情况下,打包后发现产出的静态资源却很大. 1.关掉sourcemap 在config/webpack.config.js文件里,大概30几行的位置添加这样一句代码,这样做的作用是防止线上生成环境将源码一起打包部署. 2.将一些公共的库(比如antd)做一个缓存 splitChunks: { chunks: 'all', name: "vender", cacheGroups: { vender: { name: "vendor&quo

vue打包静态资源路径不正确的解决办法

vue打包静态资源路径不正确的解决办法 vue项目完成打包上线的时候会碰到静态资源找不到的问题,常见的有两个 1.js,css路径不对解决办法:打开config/index.js,将其中的assetsPublicPath值改为’./’ 2.css中引用的图片资源找不到我的login.vue文件中有一段css,其中引用了一个背景图片,是这样写的 .login{height:100%;background: url("../assets/login_bg.jpg") no-repeat

webpack4 打包静态资源

demo 代码点此,开始之前,先做点准备工作. 准备工作准备一个空文件夹,然后执行下列命令: npm init -y npm i -D webpack webpack-cli 然后创建一个 dist 目录,并在里面创建一个 indedx.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi

pyinstaller打包的exe太大？你需要嵌入式python玄学探索篇

上篇我们讲到pip的安装以及普通库用pip的安装方法 CodingDog:pyinstaller打包的exe太大?你需要嵌入式python玄学拓展篇zhuanlan.zhihu.com 问题纷沓而至:Tk/Tcl不存在!! 程序猿(媛):嗯···让(sha diao)用户用黑乎乎一片命令行工具似乎不太妥当还是界面来的方(wu)便(nao)!试一下tkinter! emmm???? 程序猿(媛)的表情是这样的: [请不要质疑我哪来的这么多汪星人的表情,我可是代码汪!] 赶紧去查一下如何安装T

pyinstaller打包的exe太大？你需要嵌入式python玄学拓展篇

上篇我们讲到embedded版本的基础操作 CodingDog:pyinstaller打包的exe太大?你需要嵌入式python玄学惊喜篇zhuanlan.zhihu.com 可是却没有办法用pip安装必要的库去看一下官方文档怎么说的 version of python do not supports pipdocs.python.org 嗯...不支持不光如此,Tcl/tk也是不给你滴... 可是谁甘心只用标准库敲代码?卒都不知道怎么卒的··· 关键是他,,,他掉头发呀程序猿(媛)

pyinstaller打包的exe太大？你需要嵌入式python玄学惊喜篇

上篇讲到 pyinstaller打包exe太大的问题 CodingDog:pyinstaller打包的exe太大?你需要嵌入式python玄学前提篇zhuanlan.zhihu.com 那既然pyinstaller这么麻(nan)烦(yong) 那为什么不找一种方法代替它呢? 经过多方面打听,一位道上的盆友告诉了我一个惊天大秘密 python有embedded版本当我看完了官方的文档以后...我的表情是这样的惊喜&惊喜&惊喜&惊喜像发现了新大陆一样 python37的em

vue打包静态资源路径不正确的解决办法【转】

vue项目完成打包上线的时候很多人都会碰到静态资源找不到的问题,常见的有两个 1.js,css路径不对解决办法:打开config/index.js,将其中的assetsPublicPath值改为’./’ 2.css中引用的图片资源找不到我的login.vue文件中有一段css,其中引用了一个背景图片,是这样写的 .login{height:100%;background: url("../assets/login_bg.jpg") no-repeat; background-siz

vue项目之webpack打包静态资源路径不准确

摘自:https://blog.csdn.net/viewyu12345/article/details/83187815 问题将打包好的项目部署到服务器,发现报错说图片找不到. 静态资源如js访问不到分析并且解决问题明确一点的就是,看到报错404,找不到静态资源,很明显,路径错误了. 静态资源找不到如js文件资源打包路径有误,打包后的资源使用了绝对根目录路径,因此将项目部署到特定目录下,其引入的资源路径无法被正确解析. 解决: 找到config下面的index.js文件,将划线处改为如下

vue打包静态资源后显示空白及static文件路径报错

1.打包之后打开dist的页面显示空白: 这个是打包项目比较常见的一个错误改一下config下面的index.js中bulid模块导出的路径.因为打包后的index.html里边的内容都是通过script标签引入的,默认显示的路径不对,打开肯定是空白的. 2.src里边router/index.js路由配置里边默认模式是mode:'hash'(页面会在路由上加#),有时候改成了history(纯净路由)模式的话,打开也会是一片空白.所以改为hash或者直接把模式配置删除,让它默认的就行 . e

webpack打包静态资源和动态资源

1.对于静态引用的资源: <img src = "static/modelname/imgname.png"> // 修改为下面的写法 <img src = "../../../static/modelname/imgname.png"> 2.不准在内联内显试的引用图片 // 禁止出现下面写法 <div style = "background: src(...)"></div> 3.动态引用

动态script标签同步加载 ps：无打包编译，静态实现静态资源入口动态配置，无编译打包静态资源添加版本号

/**功能:创建动态标签加载css ,js文件,重点是js文件,利用onloading加递归实现动态标签的同步加载用法:在html文件body底部script内部声明并调用下列函数,obj中写要加载的文件信息注意,由于css是后来加载的,所以页面会存在无样式的页面骨架闪烁问题,可以在头部head标签里加个body{opacity:0},在css文件中再改为body{opacity:1} */ function noAsyncScriptTag() { var obj = { pubPath: "

pyinstaller打包的exe太大？你需要嵌入式python玄学

pyinstaller打包一个exe动辄几十M几百M (特别是import pandas以后) 知乎上居然没有人po这方面的”知识“(手动狗头) 查了很多关于reduce pyinstaller打包出exe大小的方法列举如下玄学解法1 去除不必要的库当我们用cmd/powershell 输入这一段神秘代码并且回车的时候 pyinstaller除了会打包test.py使之成为一个exe之外,还会创建一的后缀名为 .spec 的文件长这样打开以后大概是这个样子注意选中的这一行然后就可以

eclipse使用maven打包的时候发现静态资源没包含进去

今天在打包的时候,发现传上去的包里没有配置静态资源. (右键项目--->Run As ---> 8 Maven install ) 后来发现是因为在pom.xml里没有配置打包静态资源的. <resources>给出各个资源在Maven项目中的具体路径. <build> <finalName>project</finalName> <resources> <resource> <directory>src/m

Vue Cli 打包之后静态资源路径不对的解决方法

cli2版本: 将 config/index.js 里的 assetsPublicPath 的值改为 './' . build: { ... assetsPublicPath: './', ... } cli3版本: 在根目录下新建 vue.config.js 文件,然后加上以下内容:(如果已经有此文件就直接修改) module.exports = { publicPath: '', // 相对于 HTML 页面(目录相同) } 参考链接: 1. vue打包静态资源路径不正确的解决办法 2. V

vue-cli 引用elementUI打包后文件过大

解决方案:使用externals引用第三方资源,防止element资源被打包到自己项目中,(总共修改3个页面index.html.webpack.base.conf.js.main.js) 1.修改index.html页面,再head中引入cdn. 2.修改webpack.base.conf.js文件.添加externals配置 externals: { vue: 'Vue', element: 'ElementUI', }, 3.删除main.js中的相应import from.因为如果不删除

关于react打包之后静态资源加载错误的问题

之前在打包react项目时发现一些问题,打包出来后我的一部分png图标加载不出来,开发者模式发现他们的路径中莫名其妙混入了我在react-router路由中使用<Browserrouter>的路由名称,网上看到有一种方法是使用Hashrouter,但我的一些功能不允许因此这个方式自然不行,但是我却发现另一个问题,同样的png图片为什么偏偏那几个出不来,我进入开发者模式发现另外那些显示正常的png图片全部被转换成了base64,所以不存在加载静态资源的问题,那为什么不把这几个显示错误的也把他们转

详解vue静态资源打包中的坑与解决方案

本文主要解决: 1.vue-cli默认配置打包后部署至特定路径下静态资源路径错误问题; 2.静态资源打包使用相对路径后css文件引入图片路径错误问题. 一.问题 vue-cli 脚手架生成的默认打包配置文件情况下运行 npm run build 打包后,部署项目至特定路径下:如://ip:port/public/springActivity/ 此时访问:http://ip:port/public/springActivity/index.html index.html 可以正常访问,但是引用的j

静态资源打包：一个javescript 的src引用多个文件，一个link引用多个CSS文件

疑惑描述: 查看了淘宝网的首页源文件,看到这样的一个特殊的 <script src="http://a.tbcdn.cn/??s/kissy/1.1.6/kissy-min.js,p/global/1.0/global-min.js,p/et/et.js?t=2011092320110301.js"></script> 里面用逗号分隔了几个js文件kissy-min.js,p/global/1.0/global-min.js,p/et/et.js 这个是什么道理

ASP.NET MVC 静态资源打包和压缩问题小记

ASP.NET MVC 中有个 BundleConfig 用于静态资源的打包和压缩,我在使用的过程中遇到一些问题,现在做下总结,并给出具体的解决方案. 问题一:打包压缩后的 JavaScript 和 CSS 中引用的文件 404 错误. 代码如下: // Styles. bundles.Add(new StyleBundle("~/bundles/styles/site.css").Include("~/static/styles/site.css")); // S

maven打包忽略静态资源解决办法，dispatchServlet拦截静态资源请求的解决办法

问题: maven 打包时,有的文件打不进去target 解决: 因为maven打包默认打Java文件.在项目中的pom文件中加build标签 <build> <resources> <resource> <directory>src/main/java</directory> <includes> <include>**/*.properties</include> <include>**/*.x

react打包静态资源太大

热门专题