vue-上线优化

最新推荐文章于 2022-06-20 16:21:50 发布
最新推荐文章于 2022-06-20 16:21:50 发布
阅读量367 收藏
点赞数
分类专栏： vue vue-上线优化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/missKang/article/details/103895286
版权

生成打包报告

  1. 通过命令行参数的形式生成报告
    在终端执行命令：vue-cli-service build --report。会生成一个report.html文件的打包报告。
  2. 在终端执行命令：vue ui ，进入可视化ui面板，可以在其中的build模块查看打包报告。

修改webpack的默认配置

通过vue-cli创建的项目中，默认隐藏了webpack的配置。

  1. 通过创建vue.config.js修改webpack的默认配置。参考文档：https://cli.vuejs.org/zh/config/#vue-config-js

修改打包入口

***//将main.js改成两个相同的main-dev.js,main-prod.js***
module.exports = {
    chainWebpack: config => {
        config.when(process.env.NODE_ENV === 'production', config =>{
        //发布阶段的打包入口,process.env.NODE_ENV可以拿到当前的模式。
            config.entry('app').clear().add('./src/main-prod.js')
        })
        config.when(process.env.NODE_ENV === 'development', config =>{
        //开发阶段的打包入口
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}

加载外部CDN资源（externals）

默认情况下，通过impor语法导入的第三方依赖包，最终会被打包并合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。

  1. 在vue.config.js文件中的发布模式配置externals节点
    如：
***//将main.js改成两个相同的main-dev.js,main-prod.js***
module.exports = {
    chainWebpack: config => {
        config.when(process.env.NODE_ENV === 'production', config =>{
        //发布阶段的打包入口,process.env.NODE_ENV可以拿到当前的模式。
            config.entry('app').clear().add('./src/main-prod.js')
            config.set('externals',{**//externals需要用config.set来设置。**
				vue: 'Vue',**//健为要引入的包名，值为为其的重命名**
				vue-router: 'VueRouter',**//有短横线分隔的需要用引号包裹。**
				axios: 'axios',
				lodash: '_',
				echarts: 'echarts',
				nprogress: 'nprogress',
				'vue-quill-aditor': 'VueQuillEdutor'
			})
        })
        config.when(process.env.NODE_ENV === 'development', config =>{
        //开发阶段的打包入口
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}
  1. 把main-prod.js中的inport语句删掉。在index.html中通过link标签和script标签的方式把相应的css样式、js做全局导入。

通过CDN优化ElementUI的打包

发布阶段由于element-ui的组件包比较大，导致文件本身体积过大。也通过CDN的形式来加载。

  1. 在main-prod.js中，注释掉element-ui按需加载代码
  2. 在index.html中的头部通过link和script标签导入element-ui的js和css样式。

首页自定义配置

  1. 在vue.config.js文件中配置config.plugin来配置参数变量。如：
***//将main.js改成两个相同的main-dev.js,main-prod.js***
module.exports = {
    chainWebpack: config => {
        config.when(process.env.NODE_ENV === 'production', config =>{
        //发布阶段的打包入口,process.env.NODE_ENV可以拿到当前的模式。
            config.entry('app').clear().add('./src/main-prod.js')
            config.set('externals',{**//externals需要用config.set来设置。**
				vue: 'Vue',**//健为要引入的包名，值为为其的重命名**
				vue-router: 'VueRouter',**//有短横线分隔的需要用引号包裹。**
				axios: 'axios',
				lodash: '_',
				echarts: 'echarts',
				nprogress: 'nprogress',
				'vue-quill-aditor': 'VueQuillEdutor'
			})
			**config.plugin('html').tap(args => {
				args[0].isProd = true//isProd是自定义的变量名
				return args
			})**
        })
        config.when(process.env.NODE_ENV === 'development', config =>{
        //开发阶段的打包入口
            config.entry('app').clear().add('./src/main-dev.js')
            **config.plugin('html').tap(args => {
				args[0].isProd = false
				return args
			})**
        })
    }
}
  1. 在index.html的title标签中做一个三元运算用来判断是开发模式还是发布模式。如：
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    **<title><%=htmlWebpackPlugin.options.isProd?'发布模式' : '开发模式' %></title>**
    //也可以用来控制按需加载的CDN（CDN是指通过link和script方式加载的资源）
    **<% if(htmlWebpackPlugin.options.isProd) { %>** //左大括号不能省
    //通过externals加载的外部CDN资源。
   <link rel="icon" href="<%= BASE_URL %>favicon.ico"> //发布模式需要加载的css样式
   <script src=""></script>//发布模式需要加载的js文件样式
  **<% } %>** //右大括号不能省，表示结束
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

路由懒加载

当项目过大时，路由文件会随之变大，为了避免文件过大，设置路由懒加载，通过分组的形式加载整组路由，而不是单独加载。

  1. 安装@babel/plugin-syntax-dynamic-import 包。在vue ui可视化中加载开发依赖中搜索
  2. 在babel.config.js配置文件中申明该插件。在plugins中申明插件
module.exports = {
  'presets': [
    '@vue/cli-plugin-babel/preset'
  ],
  'plugins': [
    [
      'component',
      {
        'libraryName': 'element-ui',
        'styleLibraryName': 'theme-chalk'
      }
    ]
    **'@babel/plugin-syntax-dynamic-import'//这里就是申明插件**
  ]
}
  1. 将路由改为按需加载的形式
import Vue from 'vue'
import VueRouter from 'vue-router'
//路由懒加载主要改变import载入的方式
//import Login qqq '../components/qqq.vue'
//import Login www '../components/www.vue'
//import Login eee '../components/eee.vue'
///第一组改编
const qqq = () => import(/* webpackChunkName: group-name1 */ '../components/qqq.vue')//group-name1为组名，同组路由会一同加载
const www = () => import(/* webpackChunkName: group-name1 */ '../components/www.vue')
const eee = () => import(/* webpackChunkName: group-name1 */ '../components/eee.vue')

//import Login aaa '../components/aaa.vue'
//import Login sss '../components/sss.vue'
//import Login ddd '../components/ddd.vue'
///第二组改编
const aaa = () => import(/* webpackChunkName: group-name2 */ '../components/aaa.vue')//group-name2为组名，同组路由会一同加载
const sss = () => import(/* webpackChunkName: group-name2 */ '../components/sss.vue')
const ddd = () => import(/* webpackChunkName: group-name2 */ '../components/ddd.vue')
//路由懒加载的分组设置
Vue.use(VueRouter)
export default new VueRouter({
  routes: [
  //第一组
    {path: '/qqq', component: qqq },
    {path: '/www', component: www },
    {path: '/eee', component: eee },
   //第二组
    {path: '/aaa', component: aaa },
    {path: '/sss', component: sss },
    {path: '/ddd', component: ddd }
  ]
})

项目上线

创建node服务器

创建node项目，安装express，通过express快速创建web服务器，将vue打包生成的dist文件夹托管为静态资源即可。代码如下：

const express = require('express')
const app = express()//创建服务器
app.use(express.static('./dist'))//托管静态资源
app.listen(8000,()=>{//启动服务器
	console.log('服务器已启动')
})

开启gzip配置

使用gzip可以减少文件体积，使传输速度更快
可以通过服务器端使用express做gizp压缩。配置如下：

  1. 安装compression包，如：npm install compression -D
  2. 导包。如：const compression = require(‘compression’)；
  3. 启动中间件，如：app.use(compression()) //一定要卸载托管今天资源之前，不然不会生效。
    如：
const express = require('express')
const compression = require('compression')
const app = express()//创建服务器
app.use(compression())//必须放在托管静态资源之前。
app.use(express.static('./dist'))//托管静态资源
app.listen(8000,()=>{//启动服务器
	console.log('服务器已启动')
})

配置HTTPS服务

数据加密

  1. 申请SSL证书。（个人测试申请网站：https://freessl.org）
  2. 注册并下载ssl证书。（full_chain.pem公钥，private.key私钥）
  3. 在后台证书导入：
    如：
//在app.js中写的
const https = require('https')
const fs = require('fs');
const options = {
	cert: fs.readFileSync('./full_chain.pem')
	key: fs.readFileSync('./private.key')
}
https.createServer(options,app).listen(443)//默认端口443

使用pm2管理应用

都是在终端上运行的
使node项目可以后台运行

  1. 在服务器中安装pm2：npm i pm2 -g
  2. 启动项目：pm2 start脚本 --name自定义名称
  3. 查看运行项目：pm2 ls
  4. 重启项目：pm2 restart 自定义名称
  5. 停止项目：pm2 stop 自定义名称
  6. 删除项目：pm2 delete 自定义名称
Vue-cli3.0+ 打包优化（六种常用方案）
欧阳的技术博客
04-17 7万+
Vue打包优化实践方案（已上线）
Vue项目优化&&项目上线
weixin_48884617的博客
04-22 1875
Vue项目优化&&项目上线
【Vue优化】—— Vue项目上线可以做的一些基本优化
柳柳66的博客
04-24 240
前言：优化方法来自掘金作者wangly19的总结博客 开发过程 1、优先使用v-if v-if和v-show理论上都是作用于元素的显示隐藏，只是一个是直接对DOM，一个是通过CSS的display来操作的。 在项目中大部分的时候 都直接使用v-if直接代替使用v-Show 只有当DOM频繁进行显示和隐藏的时候，用v-Show。 (这种场景很少见，比如信息同送优先级中使用，项目中一直通过WebS...
Vue 项目上线优化
官方推荐
04-29 477
在使用 npm run build 打包时 移除console 初衷： 随着项目功能的不断完善 代码的累积 项目中的庞大代码数量 造成我们打包时的长时间等待 尤其是我们在开发阶段留下的过多的测试代码 例如最常见不过的console 消耗我们的时间 并且占有一定的内存 优化： 使用 babel中 的一个插件，因为webpack 打包时会使用 babel 进行代码降级，所以babel 插件可以在打包...
VUE项目上线与优化
Lifetime的博客
09-11 219
展示进度条 1.安装Nprogress npm install --save nprogress 2.在main.js中导入js和css import Nprogress from 'nprogress' import 'nprogress/nprogress.css' 3.在拦截中展示进度条 Nprogress.start() 4.在response拦截器中隐藏进度条 Nprogress.done() axios.interceptors.response.use(config => {
vue项目上线及优化总结
lpl_L的博客
09-24 339
vue项目上线及优化总结 生成打包报告: 原因：为了直观的发现项目中存在的问题，生成报告有两种方式： 1.通过命令行参数的形式生成报告,不推荐使用； 2.通过可视化的UI直接查看报告，推荐使用； 可以在命令行执行vue ui 即可打开可视化UI，然后通过控制台和分析面板，可以方便的看到项目中的问题。 优化的主要成分： 在我们的项目中，占内存最大的其实不是我们的代码资源，而且第三方依赖项，占比量通常都早85%到90%左右，比如elemen ui组件库，echarts数据可视化组件 优化策略 通过vue.co
学习vue-admin-template，优化了大量融入代码，添加中文注释
05-16
10. **部署与上线**：了解如何将vue-admin-template项目打包，并部署到服务器，如使用nginx或Apache配置反向代理。 通过深入学习和实践这些知识点，你不仅可以掌握vue-admin-template的使用，还能提升自己的Vue.js...
详解使用vue-admin-template的优化历程
12-03
但是，开始用的时候，作者并没有对此进行优化，到项目上线的时候，才发现，打包出来的文件都十分之大，就一个 vendor 就有 770k 的体积（下图是基础模板，什么都没加打包后的文件信息）： 通过 webpack-bundle-...
vue-portal1：简单的门户网站服务
02-17
Vue CLI中的`npm run build`命令会执行这个任务，包括对代码的优化、压缩和资源版本管理，确保上线后应用性能最佳。 在文件名列表中提到了 "vue-portal1-master"，这可能是项目的源码仓库主分支。通常，"master" ...
浅谈vue项目4rs vue-router上线后history模式遇到的坑
10-17
然而，这种模式在上线后可能会带来一些坑，尤其是在SEO（搜索引擎优化）和服务器配置方面。 在`hash`模式下，路由的变化并不会导致浏览器向服务器发起新的请求，因此可以直接通过修改`index.html`的`<base href>`...
详解webpack的配置文件entry与output
12-12
本文介绍了webpack的配置文件entry与output，分享给大家，具体如下： 在webpack.config.js中entry是唯一入口文件 entry也可以是一个数组 如果是一个数组，会将数组里面的文件一起打包到bundle.js entry也可以是一个对象。 如果output里filename有三个值： .[name]是文件名字是entry的键值。 .[hash]是md5加密的值。 .[chunkhash]这里是作为版本号使用。 每次修改文件，运行之后，都会生成不一样的hash 于chunkhash值，方便上线时静态资源的版本管理。 文件名如果每次运行都是变化的，文件引入的名
Vue项目优化上线
weixin_44748589的博客
06-20 124
nprogress插件使用方法：1. 在vue可视化面板中点击依赖->下载依赖->运行依赖->搜索nprogress并下载2. 在main.js中引入nprogress插件 3. 使用nprogress 开发时使用的console.log() 编译时不再打印：使用插件babel-plugin-transform-remove-console1.在vue可视化面板中点击依赖->下载依赖->开发依赖->搜索babel-plugin-transform-remove-console并下载2. babel.
vue 前端项目上线优化(一）
LisaWwwang的博客
12-11 234
vue 前端项目上线优化（一） 懒加载 资源懒加载 路由懒加载 资源懒加载 涉及到如element-ui，ant-design 等UI框架按需加载，或Echarts图表按需加载加载等方式可以大大减小项目打包体积。我们只需要在真正要使用到它某一个组件的时候的时候才会在这里加载到我们需要的这个组件，而不是在最开始的时候把整个库都加载到项目上，这样做将会产生非常多不必要的开销。 实现方法 举个例子，echarts的按需引入 在utils目录下新建文件echarts.js let echarts = r
vue打包上线优化
weixin_58032613的博客
02-18 833
本文详细的讲解了项目打包上线的过程，如有错误，请私信我更改
vue项目优化与上线部署
柏京
11-03 344
一.项目优化策略 1.生成打包报告 2.第三方库启用CDN 3.Element-ui组件按需加载 4.首页内容定制 5.路由懒加载 1.生成打包报告 1.1通过vue-cli的UI面板直接查看 1.2通过命令行参数生成报告 // 生成report.html分析报告 vue-cli-service build --report 2.修改webpack配置 https://cli.vuejs.org/zh/config/#vue-config-js 如果有修改webpack默认配置的需求，可以在项目根
Vue项目上线前的一些优化，满满的干货
weixin_45389051的博客
08-17 667
一.webpack-bundle-analyzer 这是一个可视化打包文件分析工具 如何使用呢? npm i webpack-bundle-analyzer --save-dev 然后在scripts中 "analyzer": "use_analyzer=true npm run serve", 再去到我们的vue.config.js module.exports ={ chainWebpack: config => { if (process.env.use_analyzer) {
vue项目上线步骤
Claire_Moon的博客
09-05 1777
今天，我要将前几篇文章中做好的项目上线，步骤如下; 一. 工具准备 需要用到这个工具 finalshell.exe，来连接服务器，可以自行下载并安装，简单~ https://pan.baidu.com/s/1LvMGdZ8u9r3Cqa–UsEyDw 二. 服务器准备 我买的是阿里云服务器，买了服务器，就会拥有一台服务器，当然也会拥有固定的IP，至于域名，可以选择注册，也可以不注册（注册域名，要进...
vue项目上线打包优化和部署
温柔雨哥的博客
04-29 639
项目的优化和部署，项目开发阶段和上线以后有些地方可能不一样，接口可能会发生改变，还有上线以后不需要的文件，等一些问题存在，所以解决办法是，把入口文件分开，一个用于开发环境打包，一个用于上线以后打包 具体步骤，分为以下几点： 1.在src目录下创建 prod_env.js和dev_env.js 然后将main.js中的内容复制到这两个文件中，就可以删除main.js文件了 2.在根目录下新建v...
Vue-Krpano全景演示框架的快速安装与使用指南
开发完成后，为了将Vue项目部署上线，需要对项目进行打包。打包过程会将项目中的所有资源、代码进行压缩和优化，生成生产环境中可直接使用的静态文件。打包命令如下： ``` npm run build 或 yarn build ``` 5. Vue-...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值