前端性能优化二十三：花裤衩模板打包mock优化

于 2024-02-10 11:45:20 发布
阅读量160 收藏
点赞数 2
文章标签： 前端 软件工程 系统架构 性能优化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68635815/article/details/136090225
版权

(1). 优化mock.js:

①. 分析:
    a. 通过查看report报告,发现mock.js占用文件很大.
    b. 实际生产环境根本用不到.

②. 注释main.js中的代码:
    // if (process.env.NODE_ENV === 'production') {
    //   const { mockXHR } = require('../mock')
    //   mockXHR()
    // }

③. 注释后重新打包的report报告.

优化前：
在这里插入图片描述
优化后：

在这里插入图片描述

Sunny_媛
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-element-admin 去掉mock数据，用后台接口登录
weixin_45835850的博客
04-28 5293
文章目录前言需要修改的文件1、/src/main.js2、.env.development3、vue.config.js4、src/api/user.js5、src/store/modules/user.js6、src/utils/request.js 前言 记录一下去掉mock数据，用自己接口登录 需要修改的文件 1、/src/main.js 代码如下： 注释掉 // if (process.env.NODE_ENV === 'production') { // const { mockXHR
vue-admin-template入口文件main.js解析说明
csdneryun的博客
06-14 143
mock.js:可以在后端没有提供接口的时候，自己模拟一个mock接口去请求，并且mock.js甚至可以返回你希望得到的随机数据。NODE_ENV 就是其中的一个环境变量。这个变量主要用于标识当前的环境（生产环境，开发环境）。process.env 是 Node.js 中的一个环境对象。其中保存着系统的环境的变量信息,在package.json中的scripts命令如下。
vue.js创建网站实例6
hifhf的专栏
11-04 1117
打包部署 vue-admin-template版本4.4 后台接口地址http://waste-admin-api/manage/login/login.php 1.修改vue.config.js proxy: { [process.env.VUE_APP_BASE_API]: { // target: 'http://waste-admin-api/manage', //修改后台接口地址 target: 'https://aa.bbb.cn/',
elementuiadmin 去掉默认mock权限控制的设置
hzmpkpkppk的博客
04-11 2976
一般前后端分离的项目，前端都很少通过mock模拟数据来调用测试，因为后期api出来后，可能还得修改结构，颇为麻烦。本文从实践中总结，完全去掉默认的mock控制。 1.找到vue.config.js文件，去掉mock的加载 devServer: { port: port, open: true, overlay: { warnings: false, errors: true } // before: require('./mock..
element ui 使用mock接口测试
lchmyhua88的博客
11-14 3456
一、mock简介 mock原是python的第三方库 python3以后mock模块已经整合到了unittest测试框架中，不用再单独安装 二、mock作用 1. 解决依赖问题：当我们测试一个接口或者功能模块的时候，如果这个接口或者功能模块依赖其他接口或其他模块，那么如果所依赖的接口或功能模块未开发完毕，那么我们就可以 使用mock模拟被依赖接口，完成目标接口的测试 2. 单元测试：如果某个功能未开发完成，我们又要进行测试用例的代码编写，我们也可以先模拟这个功能进行测试 3. 模拟复杂业务的接
perfmock:性能测试mock，支持自定义mock文件和延时
05-02
性能测试mock，支持自定义mock文件和延时 java -jar perfmock-0.0.1-SNAPSHOT.jar --mockfile=xxx.json --latency=1000,2000 json文件样例，结构为json数组： [ { "description": "testpost", "request" : { "uri" :...
前端mock方案对比文档
最新发布
04-01
### 前端Mock方案对比分析 #### 一、引言 在软件开发过程中，前后端协同工作是常态。为了确保前端开发不受后端进度的影响，通常会采用Mock技术来模拟后端接口返回的数据，从而使得前端开发人员能够在后端接口未...
C-Mock:C Mock是Google Mock的扩展，允许函数模拟
05-13
C Mock-Google Mock扩展 概述 C Mock是的扩展，允许函数。 仅支持全局（非静态）函数模拟。 这既不是Google Mock的补丁，也不是它的分支。 这只是一组标题，提供了一种在测试中将工具用于具有模拟功能的模拟方法的...
xmocker-cli:为前端提供mock的后台数据,
05-02
前端mock用工具介绍本工具是定制的mock服务工具，主要针对的是特殊API进行的设置。特色：定义API使用WEB页面操作API添加不仅依赖于URL链接，而是支持从输入参数中判断所属的API名称使用nodejs和Koa的function进行...
mock-cli:前端本地联调用的mock server
05-07
由于目前大多数项目是前后端分离的，mock-cli暂不考虑模板的渲染，目前只提供后端接口的mock. 使用方法 mock-cli是一个基于node的命令行工具，当运行它时，它启动一个基于koa的server来提供mock服务。 命令行参数 ...
element elcolumn 使用本地图片_Quasar 使用 Mock.js
weixin_39588223的博客
11-30 271
Quasar 使用 Mock.js前言之前我开发VUE的时候都是使用Element-UI，在Element-UI下有许多优秀的项目，比如著名的vue-element-admin。不过Element-UI最近似乎很少维护了，在被网友安利了Quasar后看来其官方文档https://quasar.dev/（中文：http://www.quasarchs.com/）后感觉功能挺多的，架构设计等个人感觉挺...
vue-element-admin4.4.0使用自定义登录接口,登录失败,无法发送登录请求
inheight的博客
03-12 781
版本： "name": "vue-element-admin", "version": "4.4.0", 原因：main.js中使用了mock数据， 以及vue.config.js中//before: require('./mock/mock-server.js')//**注释掉这一行 注释掉即可解决 注释main.js中的以下内容 /** * If you don't want to use mock-server * you want to use MockJs for mock ap
详解vue-element-admin 使用mock.js动态模拟数据
Jasonslw的博客
03-31 3367
详解vue-element-admin 使用mock.js动态模拟数据
Vue webpack生产环境打包，报错：npm ERR! Failed at the vue-admin-template@4.4.0 build:prod script.
m0_63788617的博客
08-04 9382
对Vue项目进行开发环境打包时，执行 ‘npm run dev’,可以正常运行项目；查了很多资料，也没找到方法解决，有哪位大佬知道怎么解决吗？
vue学习第一天（取消mock，连接服务端）
Jidahan的博客
09-25 4293
克隆项目 打开vue.config.js //注释devServer下的before // before: require('./mock/mock-server.js') devServer: { port: port, open: true, overlay: { warnings: false, errors: true } // before: require('./mock/mock-server.js') .
解决vue运行报错 if (process.env.NODE_ENV === ‘production‘) 和 打包报错Error in plugin “gulp-shell“
热门推荐
weixin_44982333的博客
04-11 1万+
启动的报错 <% if (process.env.NODE_ENV === 'production') { %> <% }else { %> <% } %> 打包的报错 throw new TypeError('Invalid Version: ' + version); ^ TypeError: Invalid Version: E:\����...
【Vue】Vue-cli之Mock.js 模拟数据实现及构建
YzzHA 的博客
09-30 4303
Mock 数据是前端开发过程中必不可少的一环，是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口，模拟请求数据甚至逻辑，能够让前端开发更加独立自主，不会被服务端的开发所阻塞。 以下介绍了Mock使用的基础语法，小伙伴们也可直接拿来主义，配合Vscode live-server插件愉快的 进行调试啦~ <pre id="show"></pre> <img ...
vue-admin-template删除（替换）mock数据
qq_30434271的博客
01-15 2899
vue-admin-template是一个相对比较完善的脚手架前端项目，登录后的主界面如下 想要去掉moke，需要做一下几步， 1.修改.env.development，将base api修改为本地的 # just a flag ENV = 'development' # base api //VUE_APP_BASE_API = '/dev-api' VUE_APP_BASE_API = 'http://127.0.0.1' 2.修改main.js，注释掉以下代码 /** * If .
前端协同开发：HTML、JS与CSS规范与目录结构优化
前端开发规划是确保项目高效进行的关键环节，特别是在多人协作的环境中，制定统一的代码开发规范至关重要。本篇文章将围绕HTML、JavaScript（包括Vue和React）以及CSS的使用，探讨如何建立一个组织良好、易于维护的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值