前端项目上线优化

1.格式化代码

• 使用eslint 代码检查代码的格式，vs code 想要格式化 .vue 文件，需要安装 vetur插件 ，可以格式化代码并且变成彩色 ， atl+shif+f快捷键，vetur格式化格式化代码
• 还是不符合 eslint 规范，字符串要单引号，每行的末尾不能加分号，我们可以将格式化改成vscode默认的规则

方法：在设置中加入如下代码

"vetur.format.defaultFormatter.js": "vscode-typescript"

• vs code 默认的格式化，不会将单引号换成双引号，也不会在末尾加入分号
  但是这个方法啊，他不会对以前写的代码进行修改，我们可以使用eslint提供的格式化命令来格式化
  执行

npm run lint

• 会将我们src 目录下的所有文件的代码文件自动进行格式化，但是会将我们引入的一些文件也会格式化

在项目根目录下新建 .eslintignore 文件，加入如下代码

src/assets

2.移除 console

1. babel 插件移除

安装

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

配置

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

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

重新打包

2.webpack插件

安装

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
      }
    }
  }
}

重新打包

3.插件的问题

无论运行npm run build 生产环境还是运行npm run serve 开发环境 都会删除 console语句
开发阶段使用 serve 命令启动，所以调用了bable插件，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
.

3.vue项目打包之开发环境和部署环境

项目开发阶段和上线之后的接口可能不一样
所以我们可能会频繁的更改接口，手动更改容易出错而且麻烦

解决方法：分别使用两个入口文件，一个用于开发环境打包，一个用于生产环境打包

1.创建入口文件

在 src 目录下新建 prod_env.js 和 dev_env.js
将main.js 中代码分别拷贝到这两个文件中，并删除 main.js

2.配置打包时的入口文件

项目根目录下新建 vue.config.js，写入如下代码

module.exports={
    chainWebpack:config=>{
        config.when(process.env.NODE_ENV === 'production',config=>{
            config.entry('app').clear().add('./src/prod_env.js')
        })
        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/dev_env.js')
        })
    }
}

这段代码的意思是：

• 开发时，使用 npm run serve 命令，NODE_ENV 的值就是 developmnent ，所以会将 dev.env.js 作为入口文件
• 部署时，使用 npm run build 命令，NODE_ENV 的值就是 production，所以会将 prod_evn.js 作为入口文件

4.vue项目减小打包的体积

import 方式引入的包，打包会放进去，导致打包的体积大，导致网页加载速度慢

程序打包就是访问程序中任何一个路由，都会将整个包下载到客户端，会导致加载速度变慢

解决方法：

1.CDN

线上环境中用到的外部文件， vue、vueRouter 、axios 等，用 cdn 节点引入

• 修改生产环境入口文件，即main.js
  将我们下载的一些文件引入全部删除，如vue,element-ui 等插件的 这些代码

import Vue from 'vue'
import el from 'element-ui'
import VueQuillEditor from 'vue-quill-editor'
Vue.use(VueQuillEditor)    //注册也删除

• 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>

就是把我们的import全部替换成link 和 script标签引入

• 在 vue.config.js 中添加配置

• 重新打包
  会遇到问题
  因为入口文件中的一些文件导入会被删除，index.html 中会引入相应的入口函数中删除的依赖，但是我们在开发阶段是不想要index的引入的，而是继续import我们本地的文件，所以我们要根据打包的命令是开发环境还是生产环境来执行这些引入
  
  -修改 index.html
  
• 开发时打包，html 页面中就不会有这些引用了，否则会造成冲突

5.路由懒加载

在打包时，代码会打包到一个文件中，所以下载文件速度很慢
以当前项目为例，首先展示的登录也，事实上，此时没有必要加载其他的组件，如商品、类别、角色用户等组件的代码
打包时根据路由将对应的组件分割成不同的代码块，访问对应的路由时再加载对应的代码块（组件），这样，我们的访问就高效了

注意：切分之后，并不是浏览器访问某个路由，才去下载对应的模块，仍然在首次访问程序时，下载所有模块，只不过每个模块分的很小，加载首页时需要的模块能够更快的下载下来，所以能够更快的显示

1、安装插件

安装 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 中引入并注册中间件