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

目录
  • 一、为开发模式与发布模式指定不同的打包入口
  • 二、通过externals加载外部CDN资源
  • 三、通过CDN优化ElementUI的打包
  • 四、首页内容定制
  • 五、使用路由懒加载

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

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)

相关推荐

  • vue项目优化之通过keep-alive数据缓存的方法

    <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中. prop: include: 字符串或正则表达式.只有匹配的组件会被缓存. exclude: 字符串或正则表达式.任何匹配的组件都不会被缓

  • Vue项目优化的一些实战策略

    Vue项目优化的一些实战策略

    Vue项目完成后就要从开发环境转成生产环境 一些第三方的包体积过大,导致生成js文件过于庞大,这是时候可以生成打包报告来查看项目中的问题 1.生成报告有两种方式,一种使用npm run build --report 2.另一种使用vue脚手架的ui可视化面板,在项目中输入vue ui 3.点击生产环境下的运行按钮,可以看到打包出来的js文件一共有2M之多,js/chunk-vendors.js就是一些项目依赖文件, 再右侧可以看到element-ui 和echarts 以及富文本编辑器,树状表格

  • 详解vue项目优化之按需加载组件-使用webpack require.ensure

    详解vue项目优化之按需加载组件-使用webpack require.ensure

    使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build  会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash].js 类似下面的路由代码 router/index.js  路由相关信息,该路由文件引入了多个 .vue组件 import Hello from '@/components/Hello' import Province from '@/components/Province' import Segm

  • Vue项目优化打包之前端必备加分项

    Vue项目优化打包之前端必备加分项

    目录 前言 一.路由懒加载 1. 为什么需要路由懒加载 2. 如何实现路由懒加载 3. 路由懒加载中的魔法注释 二.分析包大小 1. 需求 2. 如何生成打包分析文件 三.webpack配置排除打包 1. 需求 2. 排除打包 四. 引用网络资源 1. 需求 2. CDN 3. 实现步骤 五. 打包去除console.log 1. 需求 2. 代码演示 总结 前言 Vue项目开发完毕后,对项目进行打包发布之前,必不可少的操作就是项目优化,这也是程序猿的加分项.跟随本文的脚步来看看如何对项目进行优

  • Vue项目优化打包详解

    Vue项目优化打包详解

    目录 前言 一.路由懒加载 1.为什么需要路由懒加载 2.如何实现路由懒加载 3.路由懒加载中的魔法注释 二.分析包大小 1.需求 2.如何生成打包分析文件 三.webpack配置排除打包 1.需求 2.排除打包 四. 引用网络资源 1.需求 2.CDN 3. 实现步骤 五. 打包去除console.log 1.需求 2.代码演示 总结 前言 Vue项目开发完毕后,对项目进行打包发布之前,必不可少的操作就是项目优化,这也是程序猿的加分项.跟随本文的脚步来看看如何对项目进行优化吧~ 一.路由懒加载

  • 浅谈vue项目优化之页面的按需加载(vue+webpack)

    浅谈vue项目优化之页面的按需加载(vue+webpack)

    通过vue写的单页应用时,可能会有很多的路由引入.当打包构建的时候,javascript包会变得非常大,影响加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应的组件,这样就更加高效了.这样会大大提高首屏显示的速度,但是可能其他的页面的速度就会降下来.结合Vue的异步组件和webpackde code splitting feature,轻松实现路由组件的懒加载. 就像图片的懒加载一样,如果客户根本就没有看到那些图片,而我们却在打开页面的时候全部给加载完了,这

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

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

    目录 一.为开发模式与发布模式指定不同的打包入口 二.通过externals加载外部CDN资源 三.通过CDN优化ElementUI的打包 四.首页内容定制 五.使用路由懒加载 一.为开发模式与发布模式指定不同的打包入口 vue ui创建的项目,隐藏了webpack配置,可以在src根目录新建一个vue.config.js配置文件.在配置文件中向外导出配置对象. 2.默认情况下,vue项目的开发模式和发布模式,共用一个打包的入口文件即(src/main.js).可以使用configureWebp

  • vue2.x 从vue.config.js配置到项目优化

    vue2.x 从vue.config.js配置到项目优化

    vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载.你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写. 前言 在实际项目中优化也是经常需要做的事情,特别在中大型项目中降低打包体积大小,提高首屏加载时间是必不可少的,同时在面试中也是一个高频问题.本片文章我将从vue.config.js配置到项目优化前后效果

  • 修改Vue打包后的默认文件名操作

    一,问题 因为我想在我的服务器上部署两个vue项目,但是vue打包后默认的项目名是dist,这样子就跟我上一个vue项目冲突了.因此查了一下资料. 二,解决方案 进入config ⇒ index.js,在build中将dist关键字改成其他名称即可. 补充知识:vue 打包后文件命名 在 confige文件中的 index 以上这篇修改Vue打包后的默认文件名操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 详解Vue SPA项目优化小记

    概述 之前做了一个React项目和Vue的项目,在做完后不加任何优化的情况下,这2个项目的首屏加载平均时间居然达到了20+s,好一点能进10s,差一点快30s,完全不能忍,优化势在必行,本文章记录下Vue项目的优化过程,React项目的优化后续补上. 上图是Vue项目的首页,整个项目由vue-cli搭建,主要分为4个模块,见页面左侧导航栏,总体代码量不算太大,组件的话总共50个左右吧,项目结构见下图,不算特别大的项目,但是首屏加载时间居然这么慢. 首先得确定到底是哪里导致了首屏渲染如此之慢?打开

  • vue实现的多页面项目如何优化打包的步骤详解

    遇到的问题 在多页面框架打包的过程中会,随着业务的增加页面越来越多,使用的三方包也会越来越多,但并不是所有页面都会使用到三方插件,使用webpack打包会让所有的三方包打包到一起,会导致vendor.js(三方包打包后的文件)越来越大,即使没使用过三方插件的页面也会引入,页面加载会越来越慢. 如何优化 使用cdn引入,这种就每次新建一个页面的时候手动通过cdn的方式引入,但是并不是特别好的方式,还需要手动加入. 就是使用splitChunks分割三方包,将三方包单独打包出来,根据页面的依赖情况自

  • 一次vue项目优化的实际操作记录

    一次vue项目优化的实际操作记录

    目录 前言 一.CDN引入 二.gzip压缩 三.路由懒加载,这种最简单的了就不多说了 四.打包不生成map文件 五.router上面使用props传参数,导致页面加载时间很长 总结 前言 项目前端优化是我们经常需要去做的事情,今天我们就来记录下我的实际操作. 一.CDN引入 这是一个常态化的操作了,主要是让我们通过npm下载依赖包和import引入的文件,变成线上使用,减少打包后的文件大小.比如常用的vue.ElementUI.vuex.vue-router.axios等等一些常用的 首先在i

随机推荐