讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
当前位置：首页 > web前端 > Vue.js >

正文

0

0

浅析vue中web前端项目优化（附代码）

奋力向前

奋力向前

发布时间：2021-08-27 09:39:50

|

2449人浏览过

|

来源于禅境花园

转载

之前的文章《手把手教你使用JS给通用模块写法（代码详解）》中，给大家介绍了怎么使用JS给通用模块写法。下面本篇文章给大家了解一下vue中web前端项目优化，有需要的朋友可以参考一下，希望对你们有所助。

浅析vue中web前端项目优化（附代码）

今天终于得空了，我要把kui说明文档这个项目优化下。打开太慢了，就是这个http://k-ui.cn

10几秒才能展示完全，真受不了。来张图就明白了

微信截图_20210827092359.jpg

看到这个就没啥好意外了，为什么会这么慢。

立即学习“前端免费学习笔记（深入）”；

因为说明文档的webpack配置没用vue-cli脚手架，自己手动配置的，所以问题估计会多些吧

1）webpack配置出错，导致库重复被编译到一个文件里

逐步检查了编译后比较大的文件，发现 index.js 也就是入口文件，其内容有 vue 库被重复打包了。如下图

微信截图_20210827092458.jpg

一句句排查webpack配置，没有发现问题，那么到底问题出在哪里呢，搜索了下vue的引入，发现有3个文件有引入vue，但是这并不影响编译重复啊，不应该的，最后终于发现了问题，由于是mac环境大小写敏感所致，手一抖“import Vue from 'vue'”写成了“import Vue from 'Vue'”。

看似没有任何问题debug调试也不会出错。但是问题就出现在这里，把from后面的“Vue”改位 首字母 小写的“vue”问题解决了。重新编译后文件小了 130 多 kb。从 945kb 到 800 多 kb，继续优化吧。

2）第三方裤文件过大造成的

由于说明文档有部分要代码高亮展示，文中用到了highlight.js代码高亮库。自行写了个组件，代码如下：