• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

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项目优化内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
uniapp vue与nvue轮播图之轮播图组件的示例代码发布时间:2022-02-05
下一篇:
前端常用的js函数方法发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap