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

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

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

相关推荐
咬人喵喵6 分钟前
14 类圣诞核心 SVG 交互方案拆解(附案例 + 资源)
开发语言·前端·javascript
问君能有几多愁~19 分钟前
C++ 日志实现
java·前端·c++
咬人喵喵20 分钟前
CSS 盒子模型:万物皆是盒子
前端·css
2401_8603195226 分钟前
DevUI组件库实战:从入门到企业级应用的深度探索,如何快速应用各种组件
前端·前端框架
韩曙亮1 小时前
【Web APIs】元素滚动 scroll 系列属性 ② ( 右侧固定侧边栏 )
前端·javascript·bom·window·web apis·pageyoffset
珑墨1 小时前
【浏览器】页面加载原理详解
前端·javascript·c++·node.js·edge浏览器
FreeBuf_1 小时前
Next.js 发布扫描工具:检测并修复受 React2Shell 漏洞(CVE-2025-66478)影响的应用
开发语言·javascript·ecmascript
LYFlied1 小时前
在AI时代,前端开发者如何构建全栈开发视野与核心竞争力
前端·人工智能·后端·ai·全栈
用户47949283569152 小时前
我只是给Typescript提个 typo PR,为什么还要签协议?
前端·后端·开源
馬致远2 小时前
Vue -组件入门
javascript·vue.js·ecmascript