Vue项目优化总结

一、VS Code 配置eslint 进行格式化

在开发vue项目时，eslint 作为代码检查规范工具，vs code 默认格式化工具不能识别vue文件，所以不能进行格式化，需要安装 vatur 工具，vatur工具能够格式化 .vue 文件代码，同时还具有代码高亮功能方便使用。在 .vue 文件中 使用alt+shift+f 会使用vetur进行格式化，但是格式化的代码不符合eslint规范，如字符串使用双引号，而不是单引号，每行的代码末尾加上了分号

解决方法：将vetur的格式化方式换成vs code默认格式化

在vs code设置文件中加入

设置完成之后，在格式化代码，就会使用vscode默认格式化进行格式化了，不会将单引号换成双引号，不会自动加入分号

如果之前写过一些代码，但是没有按照Eslint规范来，格式化是不行的，因为vscode格式化只会把你写的代码进行格式化，不会把之前代码中的符号转换。

这种情况下，可以使用eslint提供的一个工具，对项目中所有代码进行格式化，如果你是使用的是 vue/cli 创建的项目，则这个工具已经安装好并且配置好了

运行 npm run lint 命令 就会将项目文件中做一次整体检查，并做一些修改 比如自动将双引号改为单引号，去除末尾默认的分号，以及添加一些有必要的空格等

但是会有两个问题

（1）.

工具会检查src目录下的所有文件。如在assets目录中引入文体文件，但是文字文件中的代码不符合eslint规范，所以也被算作错误，解决方法是排除不想要检查的目录
具体是在项目根目录下新建.eslintgnore文件，加入如下代码

（2）.

工具不能解决所有问题，如变量声明，但没有使用、没有使用全等符号问题，还是需要手动解决的

总结

• 在项目开发初始，就配置好vue文件的格式化工具，并编写代码时，遵循eslint的规范编程，可以避免很多问题。

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

• 如果开发了一些代码，并没有遵循eslint规范，可以使用如下命令检查并修复一些语法问题

npm run lint

但是不能解决所有问题，需要自己去修改解决

• eslint 代码检查工具，默认会检查src目录下的所有文件，所以应该排除检查目录

二、vue打包 移除console

开发阶段我们会编写 console.log 来进行测试

使用build命令打包时，会作为警告提出，因为这些console语句在上线后是没有任何作用的，所以会警告你应该移除

手动删除 会耗时耗力 然后就是代码中还是需要console来测试的，只是在打包之后，希望生成的文件中不包含而已

解决方法如下方法：

1、babel-plugin-transform-remove-console

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

（1）、使用 npm 安装 babel-plugin-transform-remove-console

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

（2）、配置

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

之后打包就不会有此类型的警告了
但是会有一个 问题

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

npm run bulid //打包命令

还是运行

npm run serve //开发阶段使用

都会删除 console 语句
因为我们开发阶段使用 npm run serve 命令启动的，所以导致开发阶段我们的 console语句 都删除了
解决方法就是明确告诉当前是开发阶段还是生产阶段

修改babel.config.js 中的代码，修改为如下

这样就只有在上线（打包）环境下删除console语句了，开发环境不会删除

2、terser-webpack-plugin

（1）、使用 npm 安装 terser-webpack-plugin

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

（2）、在项目根目录下新建 webpack.config.js 文件，注册此插件，代码如下：

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

完成之后，重新打包就好了

三、vue项目打包 开发环境和部署环境

为开发模式与发布模式指定不同的打包入口

默认情况下，Vue项目的 开发模式 与 发布模式 ，共用一个打包入口文件 （即 src/main.js）。为了将项目的开发过程预发布过程分离，我们可以为两种模式，各自指定打包文件，即：

(1)、创建入口文件

1. 开发模式的入口文件为 src/dev_env.js
2. 发布模式的入口文件为 src/prod_env.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_env.js 作为入口文件

(3)、测试

可以故意在两个入口文件中制造错误，如注释一行需要用到的代码，然后运行打包命令，就可以看到错误信息了

四、vue 项目打包 减小包的体积

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

解决方法：
有 cdn 和 路由懒加载 方法

cdn解决方法：

（1）修改发布环境入口文件

将这些用 import 方式引入的文件删除

然后在 public/index.html 中加入上边需要的文件 cdn 代码如下：

<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>
  <script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/moment.min.js"></script>

（2）在vue.config.js 中添加配置

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

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

注意 ：经常出现第一次打包失败，第二次打包成功的情况。

五、vue 打包 首页内容生成

上一章说到了，可以通过外部cdn的方式加载依赖

但是我们希望的是，部署的时候index.html中使用这些cdn节点依赖，开发阶段，继续使用本地的包
所以我们就要在index.html中 根据当前的打包环境是开发还是发布，动态决定index.html 是需要这些引入

在之前配置的 vue.config.js 文件中编写如下代码：

修改index.html 为如下代码：

此时，开发时打包，html页面中就不会有这些引用了，否则会造成冲突

结果检测
使用 npm run build 打包之后 ， 运行dist目录下的index.html ，请求的资源是 cdn节点依赖，如下：

使用npm run serve打包，因为没有使用cdn 节点，而是将包的内容全部打包到文件中，如下：

六、vue 项目打包 路由懒加载

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

具体需要3步：
（1）、使用 npm 安装 @babel/plugin-syntax-dynamic-import

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

（2）、修改babel配置文件

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

（3）、修改路由引用

修改router/index.js 。代码如下：

之后，重新编译
懒加载前：

懒加载后：

七、vue项目 服务器文件压缩

参照上一篇博客最后的图，虽然采用了路由懒加载，但是首页加载的速度仍然比较慢，因为我们的 chunk-vendors.js 文件还是比较大

下面我们就可以在服务器端想点办法，客户端请求某个文件时，服务区端采用一定的压缩算法，对文件体积进行压缩后，再发送给客户端

对于 node.js 来说，可以使用 compression 中间件

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(9999, () => {
    console.log('Server is running at http://127.0.0.1:9999')
})

启动node项目

pm2 start ./app.js

大小还是很大

2、compression 压缩文件

使用npm 安装 compression

npm install compression

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

const express = require('express')
const app = express()
var compression = require('compression')
//使用中间件
app.use(compression())
app.use(express.static('./dist'))
app.listen(9999,()=>{
    console.log('Server is running at http://127.0.0.1:9999')
})

查看结果，发现小了很多

关于Vue项目优化方面就结束了，对您有帮助的话不忘点个赞哟 ！！！！！