vue应用移动端访问缓慢问题

由于移动端的javascript处理引擎相对于pc端在处理复杂计算或大量数据时,可能会出现性能瓶颈,从而导致访问页面缓慢严重还会出现白屏情况,所以针对此问题做以下处理提升性能。

1、打包时压缩js文件

  • 安装TerserPlugin插件
bash 复制代码
npm install terser-webpack-plugin --save-dev
  • 在 Webpack 的配置文件vue.config.js中设置 optimization
bash 复制代码
module.exports = {
    mode: 'production', // 设置为生产模式
        optimization: {
            minimize: true, // 启用压缩
            minimizer: [
                new TerserPlugin({
                    terserOptions: {
                        compress: {
                            drop_console: true, // 去掉 console.log
                        },
                    },
                }),
            ],
        },
};

2、看前后区别

  • 配置前文件大小
  • 配置后文件大小

效果非常明显,访问速度也提升了

相关推荐
何以解忧,唯有..19 小时前
Vue 3 模板语法详解:从插值到指令的完整指南
前端·javascript·vue.js
invicinble19 小时前
【无标题】
前端
EasyGBS19 小时前
从接入到稳定播放:无插件直播H5视频流媒体播放器EasyPlayer.js如何撑起Web端流媒体
开发语言·前端·javascript
不可能片场19 小时前
nohup 之后进程还是死了:GUI 子进程的存活陷阱
前端·electron
Carl_奕然19 小时前
【智能体】Agent的四种设计模式之:React(2026最新版)
javascript·人工智能·python·react.js·设计模式·语言模型
名为沙丁鱼的猫72919 小时前
React/JSX 编码规范
前端·javascript·react.js
是吕先森19 小时前
【python】selenium实现web自动化测试
前端·python·selenium
Highcharts.js20 小时前
甘特图纵向任务、横向时间显示图表可视化开发|Highcharts甘特图示例
开发语言·前端·javascript·可视化·甘特图·数据可视化·highcharts
yume_sibai20 小时前
Element Plus 导航与反馈组件完全指南(15个核心组件)
前端·elementui·交互
烬羽20 小时前
给 Agent 一个检索式记忆:把对话历史存进 Milvus,该记的都记得
javascript·数据库·agent