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

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

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

相关推荐
随心点儿4 小时前
js postMessage 实现跨域发送消息-应用示例
javascript·ecmascript·postmessage
一点一木4 小时前
从60首歌到1个网站:输入你的故事,还你一首歌
前端·github
IT_陈寒5 小时前
Vue这个特性差点让我加班到凌晨,谁懂啊
前端·人工智能·后端
kyriewen5 小时前
我让AI改一个bug——它偷偷动了5个我没让它碰的地方
前端·javascript·ai编程
遇乐的果园6 小时前
前端学习笔记-vue加载渲染优化
前端·笔记·学习
用户985033593287 小时前
OpenLayers 热力图从原理到 Vue 组件一键接入
前端
颜酱7 小时前
01 | 骨架搭建:FastAPI + Vue 跑通第一个 SSE 流式问答
前端·人工智能·后端
hoLzwEge7 小时前
解码 IDE 智能提示:jsconfig.json 辅助开发全攻略
前端·前端框架
leoZ2317 小时前
记忆系统与 Agent 定制完全指南(四):自定义 Agent 开发(一)
前端·chrome
慧一居士7 小时前
Element Plus 按需引入的配置使用说明和完整示例
前端·vue.js