首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

禁用webpack 4 vue cli 3中的cache-loader

在禁用webpack 4 vue cli 3中的cache-loader方面,cache-loader是一种用于缓存loader执行结果的webpack插件,旨在提高构建速度。但是有时候,我们可能需要禁用cache-loader,下面是一些可能的方法:

  1. 手动配置vue.config.js:在Vue项目的根目录下,创建一个名为vue.config.js的文件,然后在该文件中进行如下配置:
代码语言:txt
复制
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('js')
      .uses.delete('cache-loader')
      .end()
    config.module
      .rule('vue')
      .uses.delete('cache-loader')
      .end()
  }
}

这个配置会删除默认的cache-loader规则。

  1. 使用命令行选项:在执行构建命令时,可以使用--no-cache-loader选项禁用cache-loader。例如,在package.json文件中的scripts中,可以修改build命令如下:
代码语言:txt
复制
"scripts": {
  "build": "vue-cli-service build --no-cache-loader"
}

这样,执行npm run build时就会禁用cache-loader。

无论使用哪种方法禁用cache-loader,都需要注意禁用它可能会导致构建速度的下降,因为缓存加载器可以提高构建性能。因此,在禁用cache-loader之前,需要仔细权衡利弊。

希望以上信息能对您有所帮助。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【webpack 性能优化】编译速度从 50S 到 7S

这里选择了 AutoDllPlugin[2],它会自动完成以上两个插件的功能,这是 Vue-cli 曾经用过的一个插件 安装: webpack 4 npm install --save-dev autodll-webpack-plugin...优化了几s,成效不大 之所以成效不大,是因为 webpack4 的性能是足够优秀的了,Vue-cli 也废除了这个功能 HardSourceWebpackPlugin 安装: npm install...另外一个感慨就是前端的发展如此迅速,很多东西可能已经过时,唯有保持持续学习以及稳固基础知识才是王道 以上,希望对大家有所帮助 参考 Webpack 4 如何优雅打包缓存文件[3] 辛辛苦苦学会的 webpack...dll 配置,可能已经过时了[4] 阔别两年,webpack 5 正式发布了!...[4] 辛辛苦苦学会的 webpack dll 配置,可能已经过时了: https://juejin.im/post/6844903952140468232 [5] 阔别两年,webpack 5 正式发布了

3.4K21
  • 使用 esbuild 为你的构建提速

    统计出耗时比较大的几个loader: Vue-loader eslint-loader babel-loader Ts-loader, Thread-loader, cache-loader 一般而言...Vue 官网对此也有相关描述:https://cli.vuejs.org/zh/config/#lintonsave 再次构建, 得到如下数据: SMP ⏱ Loaders cache-loader...用的是 cli 自带的打包配置, 比如 vue-cli。 这两种方式我都会介绍,虽然形式上有所差异, 但是原理都是一样的。...去年也写过两篇相关的内容, 感兴趣的可以去看看。 「 不懂就问 」esbuild 快在哪里 ? 「 不懂就问 」webpack 打包的性能瓶颈在哪里 ? 本部分将从 4 个方面为大家介绍。...4. 畅想 esbuild 的未来 结语 esbuild 是一个强大的工具,希望大家能充分使用起来, 为业务带来更大价值。 好了,今天的内容就这么多,希望对大家有所启发。

    1.7K50

    Webpack中识别Vue-Cli3配置的别名@

    在使用webpack时,我们经常为了减少一些路径的输入会配置一个别名:@,如下: import config from '@/config' 这是很常见的写法,同时webpack默认也是支持这种代码导航...,按住 ctrl + 左键或者 command + 左键,但Vue-Cli3没有了webpack的默认配置改为了vue.config.js文件。...第一步 首先在项目根目录新建文件:alias.config.js /** * 由于 Vue CLI 3 不再使用传统的 webpack 配置文件,故 WebStorm...* 本文件对项目无任何作用,仅作为 WebStorm 识别别名用 * 进入 WebStorm preferences -> Language & Framework -> JavaScript -> Webpack...然后重启webstorm,原来的代码导航能力又有了! 还有,若有多个项目,则要为每个项目创建 alias.config.js (文件名可以随意)文件,同样也要多次配置webstorm。

    2.5K20

    使用Webpack5创建Vue2项目及优化

    前言 之前我们大多都是用Vue-Cli来创建项目,但是Vue-Cli已经停止更新了,并且Vue-Cli相当于一堆插件的集合体,我们想替换以下,或者想根据我们的项目优化以下,提升编译的性能,这时候可以自己用...的版本 npx webpack --version Vue Loader简介 https://vue-loader.vuejs.org/zh/guide/#vue-cli Vue Loader 的配置和其它的...除了通过一条规则将 vue-loader 应用到所有扩展名为 .vue 的文件上之外,请确保在你的 webpack 配置中添加 Vue Loader 的插件: // webpack.config.js..."vue-template-compiler": "~2.6.11", "webpack": "~5.74.0", "webpack-cli": "~4.10.0",...4、resolveLoader resolveLoader 与上面的 resolve 对象的属性集合相同, 但仅用于解析 webpack 的 loader 包。

    3K10

    vue-cli + webpack 新建项目出错的解决方法

    原创文章,允许转载,但转载必须注明出处并附带首发链接 https://blog.csdn.net/FungLeo/article/details/79016838 vue-cli...+ webpack 新建项目出错的解决方法 今日使用 npm init webpack love 创建一个新项目,然后执行 npm run dev 之后项目报错,提示错误如下: 没有给这些选项指定值:...A complete log of this run can be found in: 经过排查,发现是 webpack 的新版本的BUG,解决方法就是卸载新版本,安装老版本。...命令如下: npm remove webpack-dev-server npm install webpack-dev-server@2.9.1 npm run dev 然后项目就正常了。...目前确定是 webpack-dev-server@2.10.0 的 BUG。在其发布新版本解决问题之前,先安装老版本解决问题吧。 如果不能解决问题,请在评论中留言。

    60220

    【原创】Webpack构建的hash优化,vue-cli项目为例

    背景: SPA的vue应用,采用webpack2构建,打包入口为main.js 输出:main模块打包成app.js,公共lib打包成vendor.js,公共样式打包成app.css,运行时依赖打包成mainfest.js...原因分析: 1、默认情况下webpack的模块都是以一个有序数列命名的,也就是[0,1,2....]。...上述场景【4】为例: app.js因为内容变化(引入新模块)而变化 页面模块因为module.id变化(新引入静态模块,打乱顺序)而变化 vendor因为打包进的各个模块module.id发生变化 runtime...4、引入新库(即在Main中静态导入模块):仅改变代码的app和打包新库的vendor发生变化` √ ?...注:最新的webpack4中api已发生变化,并且不会有此问题。建议在webpack4经生产大规模运用后切换到webpack4

    2K40

    为什么要用vue-cli3?

    产生这个问题的原因是在试用完vue-cli3之后并没有觉得好用,反而觉得束手束脚,我cli2时,webpack想怎么配怎么配为什么到了cli3我要在vue.config.js中配置 众所周知vue-cli...vue-cli的插件机制很灵活,通过webpack-chain和webpack-merge可以实现webpack完全定制化。...通过扩展可以支持任意前端框架 针对 React 开发,不支持其他框架 parcel 是一个通用的打包工具,它的竞争对手是 webpack 编译速度 cache-loader,thread-loader...这样就可以简化升级的成本和复杂度。 ---- 3. GUI界面 虽然大部分人都觉得作用不大,因为确实对开发效率并实际的提升效果。就是看着舒服直观,这就够了。 ---- 4....当然你也可以造轮子 如果想学webpack的构建项目,也不推荐你使用vue-cli 最后给vue团队点个赞?

    1.1K20

    一篇文章说清 webpack、vite、vue-cli、create-vue 的区别

    webpack、vite、vue-cli、create-vue 这些都是什么?看着有点晕,不要怕,我们一起来分辨一下。...先看这个表格: 脚手架 vue-cli create-vue 构建项目 vite 打包代码 webpack rollup 脚手架:创建项目,选择性安装需要的插件,指定统一的风格...vue-cli 官网:https://cli.vuejs.org/zh/index.html Vue CLI 的包名称由 vue-cli 改成了 @vue/cli vue-cli 是 Vue 早期推出的一款脚手架...vue-cli 用于创建 vue2 的项目; @vue/cli 用于创建 vue3 的项目,当然也支持 vue2。...对于新手来说,把 webpack 从零开始配到跟 Vite 开箱即用功能对等的程度根本是不可能的任务,所以大部分团队/公司要么用的是基于 webpack 包一层的脚手架(umi, vue-cli),或是专门养一个人称

    1.3K20

    基于Webpack, KnockoutJs,esyui,koeasyui实现类vue-cli生成的模板框架

    不才的本人曾以JQuery走天涯;后又接受了Knockoutjs,被他MVVM思想所吸引;也学习和了解过vue,他确实很棒,很了不起,但他不兼容ie8-(基于他的几款UI框架对低本的IE支持都不友好)。...所以我产生了Knokcoutjs + easyui + webpack = ?的想法。...在编译的时候,将static文件夹进行复制。结果如下图所示: ?      最初我一味的执着于用webpack进行jquery, knockoutjs, koeasyui的引用。...二、组件开发规范如何定义和实现      因为本人对vue较为喜欢,所以很想模仿其实现文件组件方案。...但回头一起,webpack不是万能的嘛,肯定可以导入html,js文件,然后进行组装啊,果不其然。所以我们的组件模式如下: ?

    1.1K20

    前端构建效率优化之路

    项目整体是基于 Vue + TypeScirpt,而构建工具,由于最早项目是经由 vue-cli 初始化而来,所以自然而然使用的是 Webpack。...瓶颈分析 再更具体一点,我们的项目最初是基于 vue-cli 4,当时其基于的是 webpack4 版本。如无特殊说明,下文的一些配置会基于 webpack4 展开。...因此在最早期,我们所做的都是一些比较常规的优化手段,这里简单介绍最为核心的几个: 缓存 多进程 寻址优化 缓存优化 其实对于 vue-cli 4 而言,已经内置了一些缓存操作,譬如上图可见到 loader...从上图中可以看到,Vue CLi4 中,其实已经内置了 thread-loader。...基于 Vue-cli 4 的 Vue2 项目改造,大致只需要: 安装 Vite 配置 index.html(Vite 解析 <script type="module" src="...

    1.2K20

    提高生产力--让项目配置变为自己专属的脚手架

    如果从 0 开始,要配置一大堆东西,耗时长;如果直接用现在流行的一些脚手架,如vue-cli等,黑箱操作,你需要阅读文档,也很难全局看清里面到底有哪些内容......步骤 执行 init 命令 与用户交互,让用户输入项目描述、作者等信息 根据用户输入,下载对应的模板文件 根据用户输入的信息替换模板文件的对应内容 完成 CLI代码 代码不贴了,可以到 create-repo-cli...: https://github.com/LuckyWinty/create-repo-cli 参考 以webpack为构建工具的常见项目配置 注意:所有构建类相关的都应该安装到 devDependencies...happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })new HappyPack({ id: 'babel', loaders: ['cache-loader...LuckyWinty/create-repo-cli webpack-project-template : https://github.com/LuckyWinty/webpack-project-template

    53910
    领券