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、看前后区别

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

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

相关推荐
Amos_Web2 分钟前
Rust实战(四):数据持久化、告警配置与Web API —— 构建监控系统的功能闭环
前端·后端·rust
java水泥工7 分钟前
基于Echarts+HTML5可视化数据大屏展示-物流大数据展示
大数据·前端·echarts·html5·可视化大屏
U***e638 分钟前
Vue自然语言
前端·javascript·vue.js
用户7617363540122 分钟前
浏览器渲染原理
前端·浏览器
拉不动的猪22 分钟前
Vue 跨组件通信底层:provide/inject 原理与实战指南
前端·javascript·面试
得物技术22 分钟前
从数字到版面:得物数据产品里数字格式化的那些事
前端·数据结构·数据分析
用户66006766853934 分钟前
用 Symbol 解决多人协作中的对象属性冲突实战
前端·javascript
yinuo37 分钟前
前端跨页面通讯终极指南①:postMessage 用法全解析
前端
c***97981 小时前
Vue性能优化实战
前端·javascript·vue.js
哈哈O哈哈哈1 小时前
ECMAScript 2025 正式发布:10 个让你眼前一亮的 JavaScript 新特性!
前端·javascript