安装了Vue-pdf后，打包文件多出了worker.js和worker.js.gz

最新推荐文章于 2023-07-13 16:56:05 发布
最新推荐文章于 2023-07-13 16:56:05 发布
阅读量842 收藏
点赞数
文章标签： javascript vue.js pdf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43773218/article/details/129983571
版权
在使用vue-pdf组件预览PDF时，发现项目打包后文件体积显著增加，主要由于worker.js和worker.js.gz文件导致。通过修改worker-loader的配置，将worker.js的生成路径改为静态目录，可以优化打包结果，减小文件大小。
摘要由CSDN通过智能技术生成

在安装了vue-pdf预览pdf文件后，发现打包文件变得很慢，打包出来的文件多了worker.js和worker.js.gz文件，导致打包文件变得很大

解决方式：

修改node_modules/worker-loader/dist/index文件

将 const filename = _loaderUtils2.default.interpolateName(this, options.name || 'js/[hash].worker.js',

更改为   static/js/[hash].worker.js

可狗可乐
关注
VUE学习日记｜vue-pdf打包缺少worker.js导致pdf无法预览
qq_43292438的博客
12-07 3453
项目场景： 前端实现pdf在线预览功能，后段返回的pdf是文件流的形式 问题描述： 前端已通过vue-pdf实现pdf在线预览功能，且本地测试通过，但通过Jenkins打包后部署在测试环境测试时，发现pdf在线预览功能失效，显示白屏，无法正常显示内容，查看控制台报缺少worker.js 404 报错：GET http://XXX.XXX.XXX.com:8090/c52a93e....worker.js 404(Not Found) 关于如何实现pdf在线预览功能可参考我的另外一篇文章????
2024前端面试题！（附答案及解析）（2024.10月最新版）
热门推荐
这世上从不缺让人上头的新鲜感，能顾及你情绪的人实属难得。
03-27 17万+
2024前端面试题！面试宝典！总结心得！（附答案及解析）会持续更新哦！（2024.10月最新版）感谢支持，你们的鼓励是我的动力！
打包后多出来worker.js文件,去掉多出来的worker.js文件.使用vue-pdf遇到的问题
10-09 5447
打包后多出来worker.js文件,去掉多出来的js文件生成xxx.worker.js背景总结网上四种方法实验1.方法一 直接更改node包设置/node_modules/worker-olader/dist/index.js;2.方法二 在node_modules添加补丁;3. 方法三 还有使用"postinstall":"cp ./xxx.js . /node_modules/worker-olader/dist/index.js"文件替换1.方法一 更换引入路径为node_modules中不含wo
vue应用vue-pdf打包多出一个worker.js文件
xiaowochaochao的博客
06-26 3892
项目要用到pdf预览功能，因为是vue项目就是直接导入了vue-pdf组件，但是在进行打包的时候在dist文件夹下面多个worker.js文件，导致项目部署后预览pdf直接报了404 后来尝试了很多办法去解决，但是都是不太好用，目前有两种解决方案，但是都各有利弊，不过能满足要求，如果亲们有更好的办法，请指教。 1、修改node依赖 之所以打包时候会多出一个worker.js是因为vue在打包过程中的优化处理方式，常见的就是引入pdf插件。可以通过修改node_module里面的配置文件修改构建过程中pdf
安装了vue-pdf后，build打包多出了两个worker.js，处理方式
tuolingss的专栏
06-23 2908
最近电脑抽风了，好好的vue项目突然不能运行了，把node_modules清空重装也不行。问题定位在vue-pdf、worker-loader插件上，最后死马当活马医，把worker-loader也卸载了，然后使用cnpm重新安装了一下vue-pdf，发现竟然好了（虽然找不到什么原因，但很欣慰）。 vue-pdf重安装后，build打包，突然多了两个worker.js文件。 去网上搜了一下，说是再worker-loader下面修改下filename就好了。可是我根本就没有安装...
解决pdf-vue线上项目报hash+worker.js的404问题
qq_32801583的博客
05-16 888
1. 问题：老项目中有一个pdf预览的需求，解决方案为pdf-vue插件，本地没有问题，但是打包后报hash.worker.js的404问题。 2. 解决： 由于个人水平有限，参考了很多文章，也试错了很多方案，目前正确解决的方式为： 步骤一： 修改pdf原文件PdfjsWorker的引用方式： 注意： 由于版本原因，看下路径有没有es5。。。 步骤二： 修改配置文件。 老项目中添加： 新项目中vue.config.js添加： 问题已解...
promise-worker:针对Web Worker和Service Worker的基于承诺的消息传递
05-06
假设您有一个单独的worker.js文件（更易于调试，更好的浏览器支持） 现场示例： 用法 安装： npm install promise-worker 在您的主要捆绑包内： // main.js var PromiseWorker = require ( 'promise-worker' ) ;...
Vue项目打包编译优化方案
10-14
Vue 项目打包编译优化方案是为了提升项目的性能和加载速度，尤其对于大型或者复杂的 Vue 应用来说，优化显得尤为重要。以下是一些关键的优化措施： 1. **不生成.map文件**： .map 文件主要用于在开发环境中进行...
vue-cli3 项目从搭建优化到docker部署
lentoo的博客
08-19 2887
vue-cli3 项目从搭建优化到docker部署1. 创建一个vue项目1.1 安装@vue/cli1.2 初始化项目2. 全局组件自动注册3.路由自动引入3.1 拆分路由3.2 自动扫描子模块路由并导入4. 通过node来生成组件4.1 通过node来生成组件4.2 通过node来生成页面组件5. axios封装5.1 配置不同的环境5.2 请求响应封装5.3 断网处理5.4 封装图片上传5....
pdf.js和pdf.worker.js html打开pdf所需要的js
07-12
pdf.js和pdf.worker.js html打开pdf所需要的js demo：http://www.cnblogs.com/zt-zoro/articles/7156120.html
【vue】优化白屏即首次加载时间,针对vue2+webpack
宅即万物
11-17 719
在对应的webpack配置文件(webpack.base.conf.js)的module.exports 中的externals添加要忽略的包。此处有chunks与excludeChunks需要注意，chunks如果配置了，路由懒加载将会失效，所以不宜配置chunks。注意：不同包要修改的方式不同，需要研究后再修改，例如vant，vue.use(vant.button)等。至此，原本需要7-8秒才可以加载出来的页面，只需要0-1秒就可以加载出来（此次研究断断续续有两周的时间）将js中的css文件分离出来。
vue gzip压缩生成.gz文件
weixin_44153342的博客
09-18 366
【代码】vue gzip压缩生成.gz文件。
Vue-pdf打包线上控制台work.js404，pdf线上无法预览，本地正常
qq_38948398的博客
07-14 4406
引言 维护公司之前的一个项目，使用了vue-pdf插件，本地效果正常，打包线上之后控制台提示一个work.js资源引用404 问题已解决，下面介绍埋坑的几个要点位置 .vue组件内部是这样引入的 tempalte模板部分： <tempalte> <pdf :src="pdfUrl" ref="pdf"></pdf> </tempalte> script部分： <script> import pdf from 'vue-pdf'; ex
vue项目打包后体积很大
小白阿里里的博客
11-09 4585
在通过 build 命令后得到项目文件发现体积很大，其实这是由于在打包时生成了.map 文件，因为项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。而 .map 文件就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。 去除 .map 文件可以提升 build 速度，也可以保护源码。 去除方法：在 config/index.js 中修改参数， 找到...
nginx开启gzip压缩
u012114437的博客
09-21 216
gzip on; gzip_min_length 1k; gzip_buffers 4 16k; #gzip_http_version 1.0; gzip_comp_level 2; gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/jso...
vue性能优化-将资源文件打包.gz文件
最新发布
Mr_LiMing7758的博客
07-13 572
productionSourceMap: false, //打包不生成map。publicPath: './',//解决打包后css/js无法解析问题。#安装compression-webpack-plugin插件。lintOnSave: false, //关闭语法检查。// 正在匹配需要压缩的文件后缀。// 大于10kb的会压缩。#vue.config.js文件 配置。// vue.config.js文件。// 开发环境不需要gzip。// 生产环境需要gzip。// 以下代码是生产环境。
vue-pdf 打包后[hash].worker.js路径问题—打补丁
IT诗人
05-23 1764
vue-pdf插件中[hash].worker.js的默认打包路径是在dist根目录下 因我司前端项目部署系统原因，需要将[hash].worker.js文件移入dist/js/路径内。 首先需要借助 postinstall、patch-package两个插件。 安装命令行： npm ipostinstall-postinstall --save-dev npm i patch-package --save-dev 在package.json的scripts中增加一行，postintall是.
vue-cli3配置完全指南：vue.config.js解析
"本文详细讲述了如何配置vue-cli 3.0的vue.config.js文件，包括vue-cli 3与2的主要区别，以及如何在新的框架下进行个性化配置。文章提供了相关文档链接，并指出vue-cli 3基于webpack 4构建，强调了其‘0配置’的设计...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值