文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue项目完成后如何实现项目优化的示例

2024-04-02 19:55

关注

一、为开发模式与发布模式指定不同的打包入口

vue ui创建的项目,隐藏了webpack配置,可以在src根目录新建一个vue.config.js配置文件。在配置文件中向外导出配置对象。

在这里插入图片描述

在这里插入图片描述

2.默认情况下,vue项目的开发模式和发布模式,共用一个打包的入口文件即(src/main.js)。可以使用configureWebpack或chainWebpack来定义webpack的打包配置

在这里插入图片描述

把main.js文件改为main-dev.js。 复制一份main.js改为main-prod.js

二、通过externals加载外部CDN资源

默认情况下,通过import语法导入的第三方依赖包,最终会被打包合并到同一个文件中,从而导致打包成功后,单文件体积过大的问题(我们import进的css样式表,也会打包到同一个文件中,导致文件过大) 。

在这里插入图片描述

为了解决上述问题,可以通过webpack的externals节点,来配置并加载外部的CDN资源。凡是声明在externals中的第三方依赖包,都不会被打包合并到最终的文件中去。

① 配置webpack的externals节点,在发布阶段配置

在这里插入图片描述

声明在externals中的第三方依赖包,都不会被打包,项目会在用到依赖包时在window全局中去查找对应的对象。所以需要在index.html文件中引入CDN中的js和css资源,以便可以在全局中找到

需要在public/index.html文件的头部,添加如下的CDN资源引用:

具体操作流程:
① 在 main-prod.js 中,注释掉nprogress和quill引用的css文件
② 在 index.html 的头部区域中,通过 CDN 加载nprogress和quill 的 js 和 css 样式
③ 在 index.html 的头部区域中,通过 CDN 加载其余依赖的js

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

可以通过staticfile CDN来查找到对应的开源库

在这里插入图片描述

使用CDN之前的文件大小:

在这里插入图片描述

使用CDN之后的文件大小:

在这里插入图片描述

三、通过CDN优化ElementUI的打包

虽然在开发阶段,我们启用了 element-ui 组件的按需加载,尽可能的减少了打包的体积,但是那些被按需加
载的组件,还是占用了较大的文件体积。此时,我们可以将 element-ui 中的组件,也通过 CDN 的形式来加
载,这样能够进一步减小打包后的文件体积

具体操作流程如下:
① 在 main-prod.js 中,注释掉 element-ui 按需加载的代码
② 在 index.html 的头部区域中,通过 CDN 加载 element-ui 的 js 和 css 样式

在这里插入图片描述

在这里插入图片描述

完成后的文件大小:

在这里插入图片描述

四、首页内容定制

① 不同的打包环境下,首页内容可能会有所不同。我们可以通过插件的方式进行定制,插件配置如下:


 // 通过plugin('html'):找到html插件。 通过tap():可以修改这个插件里面的固定配置项
 // 通过args:可以拿到当前这个插件的一些相关参数。
  // 在args[0]中添加自定义的属性isprod,当在开发阶段时,赋值为true,发布阶段时,赋值为false

在这里插入图片描述

② 在public/index.html首页中,可以根据isProd的值,开决定如何渲染页面结构

在这里插入图片描述

在这里插入图片描述

五、使用路由懒加载

当打包构建项目时,所有路由对应的组件都会打包到一个文件中,导致文件过大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

在这里插入图片描述

到此这篇关于vue项目完成后如何实现项目优化的示例的文章就介绍到这了,更多相关vue项目优化内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯