一、Nprogress页面加载效果

1. 简介

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插件即可完成操作

  1. 参考地址:

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

  1. 安装

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

  1. 修改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
  ]
}

三、生成打包报告

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

  1. 打包项目

vue-cli-service build --report

  1. 查看打包报告

image.png

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

image.png

四、自定义打包入口

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

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文件的大小

  1. 修改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')
    })
  }
}
  1. 注释所有main-prod.js的所有css引入文件
  2. 编辑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>
……
  1. cdn加速网站

六、首页内容定制

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

  1. 修改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
      })
    })
  }
}
  1. 编辑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包会变得非常大,影响页面加载,可以根据不同的路由对应的组件分割成不同的代码块,然后当路由访问这些文件时,再加载对应的组件。

  1. 参考文档:

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

  1. 安装插件

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

  1. 修改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'
  ]
}
  1. 修改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)
  1. 打包文件效果

image.png

本文作者:博主:
文章标题:Vue项目上线前优化总结
本文地址:https://wouldmissyou.com/archives/82/     
版权说明:若无注明,本文皆为“多点部落”原创,转载请保留文章出处。
最后修改:2021 年 05 月 14 日 01 : 11 PM
如果觉得我的文章对你有用,请随意赞赏