关于Vue项目的优化

一、console的移除

开发阶段，我们会编写大量的 console 语句用于测试

使用 build 命令打包时，会作为警告提出，因为上线之后，这些 console 语句是没有任何作用的，所以警告你应该移除
挨个文件手动删除的方法，会有两个问题
耗时耗力
代码中其实还是需要console的，只是打包后，希望生成的文件中不包含而已
解决的办法比较多

1. babel-plugin-transform-remove-console
   比较流行的解决办法是使用 babel 的一个插件，因为webpack 打包时会使用 babel 进行代码降级，所以babel 插件可以在打包过程中，将 console 移除

npm 中搜索 babel-plugin-transform-remove-console，按照说明操作即可

1、安装

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

2、配置

在项目根目录下的 babel.config 文件中加入如下代码

再次运行 npm run build 命令，就不会有此类型的警告了

2. terser-webpack-plugin
   安装

npm install terser-webpack-plugin --save-dev

项目根目录下新建 webpack.config.js，注册此插件

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
    terserOptions: {
      compress: {
        drop_console: true
      }
    }
  }
}

重新编译打包就OK了

3. 问题

使用 babel-plugin-transform-remove-console 插件会有一个问题（使用terser-webpack-plugin没有此问题），就是一旦安装并配置好后，无论运行

npm run build

还是运行

npm run serve

都会删除 console，语句

因为我们开发阶段都是使用 serve 命令启动的，所以导致开发阶段我们所有的console 语句都消失了

解决办法就是明确告诉此插件当前是开发环境还是生产环境

修改 babel.config.js 中的代码

const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
  prodPlugins.push('transform-remove-console')
}
 
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [...prodPlugins]
}

此时，只有在生产环境下，才会去除 console

二、缩小包的体积

默认情况下，凡是通过 import 方式引入的包，打包时都会被打包，这就会导致最后的包体积比较大，伴随而来的就是程序的加载速度慢

说明：将程序打包的特点就是，访问程序中的任何一个路由，都会将整个包下载到客户端，这可能会导致程序的加载速度非常慢，可以通过开发者工具切换网络，模拟这个情景，所以我们应该想办法减少这个包的体积

解决方法主要是两个

一个是使用CDN

一个是路由的懒加载

先说 CDN

核心思想就是将线上环境中用到一些依赖，比如 vue、vueRouter 、axios 等，使用 cdn 节点的方式引用，而不是打到包里去，当然我们开发时依赖的一些包，最好还是使用本地包，而不是 cdn

比如我将当前项目上线后仍然需要用到的一些依赖包从 main.js 中删除，然后在 public/index.html 中加入 cdn 节点引用

修改生产环境入口文件
凡是通过CDN节点方式引用的包，在这里都删除

上面这些都可以删除，这里注释的目的是为了对比变化

然后在 public/index.html 中加入如下引用

 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.core.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.bubble.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/theme-chalk/index.css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js"></script>
    <script type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js"></script>

在 vue.config.js 中添加配置

重新运行下面命令，编译后发现包的体积小了很多

npm run build
注意：经常会出现第一次编译出错，第二次编译成功的情况

使用 CDN 的方式能够充分利用浏览器的算力，从多个节点加载包，提升程序的访问速度

三、路由懒加载

1、安装插件
使用方法参考官网 https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import/

首先需要安装 babel 的一个插件：babel/plugin-syntax-dynamic-import

npm install --save-dev @babel/plugin-syntax-dynamic-import
2、修改配置文件
在 babel 的配置文件中加入插件

3、修改路由引用
修改 router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
const Login = () => import(/* webpackChunkName: "group-login" */ '../components/Login.vue')
 
const Home = () => import(/* webpackChunkName: "group-common" */ '../components/Home.vue')
const Welcome = () => import(/* webpackChunkName: "group-common" */ '../components/Welcome.vue')
 
const Users = () => import(/* webpackChunkName: "group-rights" */ '../components/user/Users.vue')
const Rights = () => import(/* webpackChunkName: "group-rights" */ '../components/power/Rights.vue')
const Roles = () => import(/* webpackChunkName: "group-rights" */ '../components/power/Roles.vue')
 
const Category = () => import(/* webpackChunkName: "group-category" */ '../components/goods/Category.vue')
const Params = () => import(/* webpackChunkName: "group-category" */ '../components/goods/Params.vue')
 
const GoodsList = () => import(/* webpackChunkName: "group-goods" */ '../components/goods/GoodsList.vue')
const GoodsAdd = () => import(/* webpackChunkName: "group-goods" */ '../components/goods/GoodsAdd.vue')
 
const Order = () => import('../components/order/Order.vue')
const Report = () => import('../components/reports/Report.vue')

四、服务器文件压缩

1、部署项目

当前，项目已经开发完毕，正式上线后，我们使用 PM2 作为服务器软件，当然也可以使用 apache、nginx 等流行的服务器软件，毕竟我们最后编译生成的就是 html 、css和 js 文件而已，任何能够处理静态文件的服务器都可以使用

既然使用 PM2，就需要创建node项目，然后初始化项目，创建 app.js 文件，并安装 express 依赖

最后将压缩好的 dist 目录，拷贝到 node 项目根目录下

最后，编写 app.js

const express = require('express')
const app = express()
 
app.use(express.static('./dist'))
app.listen(80, () => {
    console.log('Server is running at http://127.0.0.1:80')
})

启动node项目

pm2 start .\app.js

体积还是比较大

2、compression 压缩文件

安装

npm install compression

app.js 中引入并注册中间件