Vue2.x项目开发完成后进行调优

2024-01-08 20:01:04

vue2x项目调优

1.项目优化策略

1.1. 加进度条动画

1.github搜索nprogress

2.安装nprogress

$ npm i nprogress -S

3,配置main.js

// 1、导入nprogress
import NProgress from ‘nprogress‘
import ‘nprogress/nprogress.css‘

2、使用,在请求开始的时候
axios.interceptors.request.use((config) => {
  NProgress.start()
  config.headers.Authorization = window.sessionStorage.getItem("token")
  // 在最后必须 return config
  return config
})

3、使用,在请求结束收尾的时候
axios.interceptors.response.use((config) => {
  NProgress.done()
  return config
})

4.serve看效果

1.2.生产环境下移除所有log函数

1.安装依赖

$ npm i babel-plugin-transform-remove-console -D

2.babel.config.js配置

module.exports = {
  presets: [
    ‘@vue/cli-plugin-babel/preset‘
  ],
  plugins: [
    "transform-remove-console",
  ]
}

就是这样,但是这样你开发的时候也没得看报错了

3.优化前面的babel配置

// 1.定义生产环境的插件数组,只在生产环境下生效
const ProdPlugins = []
if (process.env.NODE_ENV === ‘production‘) {
  ProdPlugins.push("transform-remove-console")
}

module.exports = {
  presets: [
    ‘@vue/cli-plugin-babel/preset‘
  ],
  plugins: [
    // 2.发布产品的插件数组
    ...ProdPlugins
  ]
}

1.3.生成项目打包报告

打包时,为了直观地发现项目中存在的问题,可以在打包时生成报告。生成报告的方式有两种:

1.命令行参数

$ vue-cli-service build --report

2.通过可视化的uiWeb面板查看报告(推荐)

在可视化的U面板中,通过控制和分析面板,可以方便地看到项目中所存在的问题。

1.4.写vue.config.js修改webpack配置

//vue.config.js
// 这个文件中,应该导出一个包含了自定义选项的对象
module.exports = {
	//..
}

1.5.main-dev.js和main-pro.js

开发模式的入口文件为main-dev.js
发布模式的入口文件为src/main-prod.js
ConfigureWebpack 和 chainWebpack

在vue.configjs导出的配置对象中,新增configureWebpack或chainWebpack节点,来自定义webpack的打包配置。

在这里, configureWebpack和chainWebpack的作用相同,唯一的区别就是它们修改webpack配置的方式不同：

chainWebpack通过链式编程的形式,来修改默认的webpack配置
configureWebpack通过操作对象的形式,来修改默认的webpack配置

1.通过 chainWebPack自定义打包入口

module.exports = {
  chainWebPack: (config) => {
    config.when(process.env.NODE_ENV === ‘production‘, (config) => {
        config.entry(‘app‘).clear().add(‘./main-pro.js‘)
    })
    config.when(process.env.NODE_ENV === ‘development‘, (config) => {
      config.entry(‘app‘).clear().add(‘./main-dev.js‘)
    })
  }
}

1.6.通过externals加载外部CDN资源

默认情况下,通过import语法导入的第三方依赖包,最终会被打包合并到同一个文件中,从而导致打包成功后,单文件体积过大的问题, 项目优化,就要打包单文件体积越小越好!!!

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

module.exports = {
  chainWebpack: config => {
    // 发布模式
    config.when(process.env.NODE_ENV === ‘production‘, config => {
      config.entry(‘app‘).clear().add(‘./src/main-pro.js‘)

      // externals加载外部CDN
      config.set(‘externals‘, {
        vue: ‘Vue‘,
        ‘vue-router‘: ‘VueRouter‘,
        axios: ‘axios‘,
        lodash: ‘_‘,
        nprogress: ‘NProgress‘,
        ‘mavon-editor‘: ‘mavonEditor‘
      })
    })

    // 开发模式
    config.when(process.env.NODE_ENV === ‘development‘, config => {
      config.entry(‘app‘).clear().add(‘./src/main-dev.js‘)
    })
  }
}

1.先在ui环境下build一下看看单文件大小

我们看着完全没有优化的单文件体积为 680kb

2.开始优化

就是依赖库的 js和css依赖, 用传统的方法导入 public/index.html

再跑一下,

变成500kb, 还是有感叹号,那是因为element-ui还是用npm导入的,占了580kb

同样的,在public/index.html导入jscss

再跑一下,

变成150kb

1.7.首页内容根据环境定制

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

需求: 开发环境我们的title是 DEV-电商, 发布环境是电商管理系统

module.exports = {
  chainWebpack: config => {
    // 发布模式
    config.when(process.env.NODE_ENV === ‘production‘, config => {

			// 根据环境渲染定制化内容
			config.plugin(‘html‘).tap(args => {
        args[0].isProd = true
        return args
      })


    // 开发模式
    config.when(process.env.NODE_ENV === ‘development‘, config => {

      config.plugin(‘html‘).tap(args => {
        args[0].isProd = true
        return args
      })
      
    })
  }
}

在public/index.html中使用

  <!-- 按需要渲染页面的标题 -->
  <title><%= htmlWebpackPlugin.options.title ? ‘‘ : ‘DEV-‘ %>电商管理系统</title>
  <!-- 按需要加载外部的CDN资源 -->
  <% if(htmlWebpackPlugin.options.isProd) { %>
    <!-- <script src="cdn.js"> -->
    <% } %>

1.8.VueRouter懒加载

当打包构建项目时, JavaScript包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

1.安装@babel/plugin-syntax-dynamic-import包

$ npm i babel/plugin-syntax-dynamic-import -D

2.在babel.config.js配置文件中声明该插件。

moodule.exports = {
	plugins: [
		...prodPlugins,
		// 声明该插件。
		‘@babel/plugin-syntax-dynamic-import‘,
	]
}

将路由改为按需加载的形式,示例代码如下(router/index.js):

2.项目上线相关配置

### 2.1 通过 node 创建 web 服务器

$ cd Desktop

$ mkdir WebApps

$ cd WebApps

$ mkdir hg && cd hg

$ npm init -y

$ npm i express -S

1.创建app.js文件

const express = require(‘express‘)

const app = express()

app.use(express.static(‘./dist‘))

app.listen(3980, () => {
  console.log(‘hg at  http://localhost:3980‘);
})

node app.js

2.2 开启 gzip 配置

使用gzip可以减小文件体积,使传输速度更快。
可以通过服务器端使用Express做gzip压缩。其配置如下:

$ npm i compression -D

// usage
const compression = require(‘compression‘)
// 启用压缩中间件
app.use(compression())

一定要写在: app.use(express.static(‘./dist‘)) 之前!!!

f12优化效果

2.3 配置 https 服务

None

2.4 使用 pm2 守护运行项目

1,安装pm2

$ npm i pm2 -g

2,启动项目:

$ pm2 start  app.js --name 自定义应用起名

3, 查看运行项目

$ pm2 ls

4, 重启项目

$ pm2 restart 自定义应用名称

5.停止项目

$ pm2 stop 自定义应用名称

6,删除项目

$ pm2 delete 自定义应用名称