vue 修改编译时间长达10几秒

最新推荐文章于 2023-08-14 10:03:30 发布
最新推荐文章于 2023-08-14 10:03:30 发布
阅读量3.5k 收藏
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38935512/article/details/102838161
版权

在这里插入图片描述

经过种种原因排除，包括重装电脑等，最后发现是vue.config.js中的配置有问题
在这里插入图片描述
这里是全局注入的两个scss文件， 文件总共500行左右吧，比较大。最后缩减文件 basic中的.class全部单独放一个文件，在app.vue中 import进去 mixin 是放混合器的 放入 basic中

最后
在这里插入图片描述

小墨宝
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cli3 从搭建到优化的详细步骤
01-19
前言 github地址： https://github.com/LeeStaySmall/vue-project-demo (完整分支：optimize分支) demo地址： vue-project-demo.eloco.cn 安装与初始化架构 安装 node >= 8.9 推荐：8.11.0 + 安装： npm install -g @vue/cli 检查： vue --version 如果已安装旧版本，需要先 npm uninstall vue-cli -g 卸载掉旧版本。 初始化架构 创建： vue create project-name 注：项目名称不能驼峰命名。 选择一个预设
vue: WebStorm设置快速编译运行的方法
10-17
今天小编就为大家分享一篇vue: WebStorm设置快速编译运行的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
提升vue项目编译速度
lookBackward的博客
11-14 1539
当编译项目时，需要花费很长时间，会在75%左右卡顿，每次稍微改一点东西都要等上好一会儿，真的很浪费前端开发人员的时间。 解决办法： 安装babel-plugin-dynamic-import-node插件， npm install babel-plugin-dynamic-import-node 公司是vue-cli2项目：在.babelrc文件里添加配置dynamic-import-node { "presets": [ ["env", { "modules": .
在vue项目中实现代码编辑器功能（代码高亮显示及自动提示）
缓月
01-20 2959
地址：在vue项目中使用codemirror插件实现代码编辑器功能（代码高亮显示及自动提示）
VUE +ElementUI，tabs组件小坑——单页面被重复构建
小张写bug的博客
05-23 6835
目录标题前言 前言 最近使用VUE + ElementUI 中的 el-tabs组件来完成一个后台管理系统的框架模板时，发现单页面的vue组件，在放进el-tabs组件中进行切换时，同一个vue页面的created方法被构建了多次，通常情况下看不出来任何问题。 然而，我们通常会在页面加载完毕时，在created钩子或mounted钩子中，对数据进行首次查询，来达到进入页面后能直接看到数据的效果。 但是，在el-tabs组件切换时，由于页面被重复构建了多次，会导致在created钩子或mounted钩子中的请
开发过程中vue项目保存编译慢优化方法
热门推荐
会飞的咕咕鱼的博客
02-21 2万+
问题描述 近期在做一个VUE项目，项目越做越大，相继带来的问提也就越来越多，当前存在的问题是：1.开发过程中，修改一个文件，保存一下项目需要特别久。 2.npm run dev启动项目需要特别久。 吓人吧，作为开发者，相信大家都懂那种感觉（想砸电脑） 优化方法 1.开启uglifyjs-webpack-plugin 的 cache（文件webpack.prod.conf.js） 该方法优化后...
我是如何把vue项目启动时间从70s优化到7秒的
CRMEB小程序商城的博客
12-20 7080
可怕的启动时间 公司的产品是一个比较大的后台管理系统，而且使用的是webpack3的vue模板项目，单次项目启动时间达到了70s左右 启动个项目都够吃一碗豆腐脑了，可是没有豆腐脑怎么办，那就优化启动时间吧！ 考虑到升级webpack版本的风险还是比较大的，出了一点问题都得找我，想想还是先别冒险，稳妥为主，所以我选择了通过插件来优化构建时间。 通过查阅资料，提升webpack的构建时间有以下几个方向： 多进程处理文件，同一时间处理多个文件 预编译资源模块，比如把长时间不变的库提取出来做预编译，构建的时候直接
连续点击多次保存按钮，重复添加数据 保存 vue
最新发布
chengchong_cc的博客
08-14 175
【代码】连续点击多次保存按钮，重复添加数据 保存 vue。
前端vue保存按钮避免多次保存
qq_42536422的博客
07-16 1301
背景： 点击保存按钮的时候有的时候会因为网络原因等造成前端页面渲染比较慢，保存按钮可以连续点击两次，但是后台并没有做任何的限制措施，后台使用的是php语言，这个时候我们并不能有效的阻止这次连续的点击，因为我们mysql判断的是有没有已经存在的数据，但是并发的时候我们数据库还没有写入成功，当前请求就立马进来了，这个时候检测就变成了多余的读操作，因为并没有写入成功，所以我们就读取不到数据，这个时候就又会进入写操作， 正常的流程逻辑： 并发下的逻辑： 前端解决思路： 从源头解决这个问题，保存按钮在每次点
vue实现几秒后跳转新页面代码
10-14
主要介绍了vue实现几秒后跳转新页面代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue项目打包编译优化方案
10-14
当一个较复杂的vue项目打包后，文件会非常大，而且访问时资源加载速度很慢，本文介绍了几种措施来优化。
优化Vue项目编译文件大小的方法步骤
12-10
与其说是优化 Vue，不如说主要是在 webpack 打包的配置中做些文章，使得 Vue 编译后的文件尽可能的小。以下介绍自己在项目中进行优化的过程，其中的内容也许并不适合于每个项目，但整体思路是差不多的。 定位问题 要...
vue 2.1.3 实时显示当前时间,每秒更新的方法
10-18
今天小编就为大家分享一篇vue 2.1.3 实时显示当前时间,每秒更新的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue编译速度过慢？大型vue 项目使用dll插件优化编译速度，效果显著
小新的博客
10-17 1万+
为什么要优化编译速度 vue项目过大，引用的组件过多，当启动项目打包项目或者修改代码的时候会发现编译速度太慢，浪费时间，甚至每改一行代码都可能需要编译三十秒以上，所以必须要优化，这样是在浪费生命 如何优化？ 百度或者谷歌，发现webpack有个插件DllPlugin，也有vuecli的版本vue-cli-plugin-dll,所以决定使用这个插件 优化步骤 插件地址 vue add dll //使...
vue （npm）yarn run serve ，保存后自动构建速度慢，卡在百分之七十左右。
晓果博客
03-29 6370
上网查阅资料，说是node内存不足；解决办法如下： 第一步： yarn add(npm install) babel-plugin-dynamic-import-node --save 第二步： 修改babel.config.js文件 module.exports = { presets: [ '@vue/app' ], env: { development: { plugins: ['dynamic-import-node'] } } } 以上操
vue项目编译内存溢出 项目过大编译太慢的问题
E_ISOLATE的博客
07-01 481
increase-memory-limit
提高vue项目编译速度的另类方法
u013729608的专栏
05-11 411
原理很简单，需要编译的代码少了啊。vue3推荐的前端构建工具vite，也是同样的原理，使用ESM加载文件，只编译当前页面需要的代码。这个方法也有一些弊端，就是当开发完需要的功能，放开注释之后，有可能样式错乱，这是由于使用extract-text-webpack-plugin抽取组件样式到单独文件中，使css 选择器的层级产生了错乱。之前接手一个项目，构建工具是webapack，前端框架是vue初代，包含多达几个页面，编译速度感人，改个字母，等待时间，足够喝几杯茶，严重影响工作效率，对于我，是绝对不能忍的。
vue项目编译、运行过慢如何提升编译(编译包括运行编译与打包编译)速度
weixin_39838846的博客
04-28 1万+
要说优化提升编译速度之前，我先给大家说一个能够列出输出、loader和plugins的耗时的插件,耗时过长将会使用黄色和红色显示。 speed-measure-webpack-plugin 这个插件我们在具体的项目中如何配置呢？下面请来看看我的配置，这个插件webpack4以上才出。 首先我们来安装： cnpm install hard-source-webpack-plugin --save //然后我们在vue.config.js中配置 const SpeedMeasurePlugin = requi
vue修改dom内元素的几种方法
05-01
Vue.js是一种流行的JavaScript框架，它提供了多种方法来修改DOM内的元素。这些方法包括以下几种： 1. 使用v-bind指令修改元素属性： v-bind指令可以用于给HTML元素添加或更新属性。例如，将imageUrl的值绑定到img...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值