Vue项目上线前优化总结

一、Nprogress页面加载效果

1. 简介

功能：当页面切换时，可以添加顶部加载效果，提升用户体验
仓库地址: https://github.com/rstacruz/nprogress

2. 安装与使用

安装

npm install --save nprogress

基本用法

NProgress.start() — 显示进度条 NProgress.set(0.4) —设置百分比 NProgress.inc() — 增加一点点 NProgress.done() — 完成进度条

3. Vue中使用

编辑main.js配置，通过添加拦截器，在发起请求时调用开始进度条方法，在获取响应后调用完成进度条方法

// 导入Nprogress加载效果插件
import Nprogress from 'nprogress'
import 'nprogress/nprogress.css'
// 请求根路径
axios.defaults.baseURL = "http://127.0.0.1:8888/api/private/v1/"
// 在request拦截器中展示进度条
axios.interceptors.request.use(config => {
  Nprogress.start()
  return config
})
// 请求时头部携带token认证信息
axios.interceptors.request.use(config => {
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // console.log(config)
  return config
})
// 在response拦截器中隐藏进度条
axios.interceptors.response.use(config => {
  Nprogress.done()
  return config
})
axios.timeout = 1000 * 10
Vue.prototype.$http = axios

修改进度条默认样式(修改global.less全局样式文件)

#nprogress .bar {
  background: #2ecc71 !important;
  height: 5px !important;
  border-radius: 5px;
}

二、项目打包后移除console.log

在开发过程中需要使用consol.log控制台打印大量的调试信息，但在产品上线后，应该去除所有的打印信息。使用babel插件即可完成操作

参考地址：

https://babeljs.io/docs/en/babel-plugin-transform-remove-console/

安装

npm install babel-plugin-transform-remove-console --save-dev

修改babel.config.js配置

// 项目发布节点用到的babel插件
const prodPlugins = []
// 如果处于发布模式，开启transform-remove-console
if(process.env.NODE_ENV === 'production'){
  prodPlugins.push('transform-remove-console')
}
module.exports = {
  presets: [
    ['@vue/cli-plugin-babel/preset', {'modules': false}]
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    ...prodPlugins
  ]
}

三、生成打包报告

在项目打包完成后，如果生成的文件过大，会导致用户访问项目时间过长，需要对生成项目文件优化时，通过打包报告，可以直观的发现项目中存在的问题。

打包项目

vue-cli-service build --report

查看打包报告

打包报告会详细列出各个组件占用文件大小的详细信息，便于优化项目

四、自定义打包入口

很多项目在生产和开发环境相关的配置是不一样的，为了便于开发维护，可以将生产和开发配置文件分离，按需使用配置文件。

1. 简介

通过vue.config.js修改webpack默认配置

通过vue-cli工具生成的项目，默认隐藏了所以webpack的配置，目的是屏蔽项目配置过程，让程序员把工作重心放在代码逻辑上。此时需要在项目的根目录中创建vue.config.js配置文件，自动以打包发布的配置

参考地址

https://cli.vuejs.org/zh/config/#vue-config-js

在默认情况下，vue项目的开发和生产模式使用同一个打包的入口文件（src/main.js），为了在开发和生产过程配置分离，可以分为两种模式，各自制定打包入口文件，即：

开发模式的入口文件为src/main-dev.js 生产模式的入口文件为src/main-prod.js

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

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

两者区别介绍文档：

https://cli.vuejs.org/zh/guide/webpack.html#%E9%93%BE%E5%BC%8F%E6%93%8D%E4%BD%9C-%E9%AB%98%E7%BA%A7

2. 配置过程

通过chainWebpack自定义打包入口（修改vue.config.js文件配置）

module.exports={
  // 如果打包文件资源路径没有dist,添加如下配置
  publicPath: '',
  chainWebpack:config =>{
    // 生产环境
    config.when(process.env.NODE_ENV === 'production', config => {
      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')
    })
  }
}

将原有的main.js改为main-prod.js和main-dev.js
最后分别执行npm serve和npm run build测试

五、通过externals加载外包CDN资源

默认情况下，通过import导入的第三方依赖包，最终会被打包到同一个文件中，导致打包后文件体积过大的，可以配置打包策略，不对第三方组件进行打包，而是通过CDN方式引入第三方资源通过webpack的externals节点，配置并加载外部的CDN资源，凡是声明在externals中的第三方依赖包，都不会被打包，这样会显著降低打包后js文件的大小

修改vue.config.js文件，添加打包时排除项,格式为包名:导入的名称

module.exports={
  // 如果打包文件资源路径没有dist
  publicPath: '',
  chainWebpack:config =>{
    // 生产环境
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')
      // 打包时排除以下第三方依赖包
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'mavon-editor': 'MavonEditor',
      })
    })
    // 开发环境
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }
}

注释所有main-prod.js的所有css引入文件
编辑public下的index.html文件，将css资源和js资源通过cdn引入

<!--icon图标样式-->
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/5.15.2/css/all.min.css" />
<!--nprogress样式-->
<link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
<!--vue.js-->
<script src="https://cdn.staticfile.org/vue/2.6.11/vue.min.js"></script>
……

cdn加速网站

六、首页内容定制

为了区分项目是生产还是开发模式，以及外部CDN资源引用(生成模式使用CDN，开发模式使用本地资源)，需要根据不同的模式，修改public/index.html的title和cdn引入方式

修改vue.config.js文件，添加是否为生产模式的标记

module.exports={
  // 如果打包文件资源路径没有dist
  publicPath: '',
  chainWebpack:config =>{
    // 生产环境
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')
      // 生产模式下，html的isProd标记为true
      config.plugin('html').tap(args =>{
        args[0].isProd = true
        return args
      })
    })
    // 开发环境
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
      // 开发模式下，html的isProd标记为false
      config.plugin('html').tap(args =>{
        args[0].isProd = false
        return args
      })
    })
  }
}

编辑public下的index.html文件，根据不同环境修改title和资源引入方式

<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 ? '' : 'dev-' %><%= htmlWebpackPlugin.options.title %></title>
      <% if(htmlWebpackPlugin.options.isProd){ %>
      <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/5.15.2/css/all.min.css" />
      <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
      <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.0/theme-chalk/index.min.css">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mavon-editor@2.9.1/dist/css/index.css" />
      <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
      <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.0/index.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/vue-router@3.4.9/dist/vue-router.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/mavon-editor@2.9.1/dist/mavon-editor.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js"></script>
      <% } %>
  </head>

七、路由懒加载

当打包构建项目时，JavaScript包会变得非常大，影响页面加载，可以根据不同的路由对应的组件分割成不同的代码块，然后当路由访问这些文件时，再加载对应的组件。

参考文档：

https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

安装插件

npm install --save-dev @babel/plugin-syntax-dynamic-import

修改babel.config.js配置文件

// 项目发布节点用到的babel插件
const prodPlugins = []
// 如果处于发布模式，开启transform-remove-console
if(process.env.NODE_ENV === 'production'){
  prodPlugins.push('transform-remove-console')
}
module.exports = {
  presets: [
    ['@vue/cli-plugin-babel/preset', {'modules': false}]
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    // 产品发布时使用的配置（移除所有的console.log）
    ...prodPlugins,
    // 开启路由懒加载
    '@babel/plugin-syntax-dynamic-import'
  ]
}

修改src/router/index.js路由规则配置文件

import Vue from 'vue'
import VueRouter from 'vue-router'
// import Login from "@/components/Login"
// import Home from "@/components/Home";
// import Welcome from "@/components/Welcome";
// import Users from "@/components/user/Users";
// import Rights from "@/components/power/Rights";
// import Roles from "@/components/power/Roles";
// import Cate from "@/components/goods/Cate";
// import Params from "@/components/goods/Params";
// import GoodList from "@/components/goods/List"
// import GoodAdd from "@/components/goods/Add"
// import Order from "@/components/order/Order";
// import Report from "@/components/report/Report";
// import Home from '../views/Home.vue'

const Login = () => import(/* webpackChunkName: "login_home_welcome" */ '@/components/Login')
const Home = () => import(/* webpackChunkName: "login_home_welcome" */ '@/components/Home')
const Welcome = () => import(/* webpackChunkName: "login_home_welcome" */ '@/components/Welcome')

const Users = () => import(/* webpackChunkName: "users" */ '@/components/user/Users')

const Rights = () => import(/* webpackChunkName: "power" */ '@/components/power/Rights')
const Roles = () => import(/* webpackChunkName: "power" */ '@/components/power/Roles')

const Cate = () => import(/* webpackChunkName: "goods" */ '@/components/goods/Cate')
const Params = () => import(/* webpackChunkName: "goods" */ '@/components/goods/Params')
const GoodList = () => import(/* webpackChunkName: "goods" */ '@/components/goods/List')
const GoodAdd = () => import(/* webpackChunkName: "goods" */ '@/components/goods/Add')

const Order = () => import(/* webpackChunkName: "order" */ '@/components/order/Order')

const Report = () => import(/* webpackChunkName: "report" */ '@/components/report/Report')

Vue.use(VueRouter)

打包文件效果