Vue Cli3 项目打包优化

1.项目优化

实现步骤：

清除生产环境中的console.log语句
生成打包报告，根据报告优化项目
第三方库启用CDN
路由懒加载
首页内容定制

2.执行build

2.1 清除生产环境中的console.log语句

安装一个插件（babel-plugin-transform-remove-console）在项目build阶段移除所有的console信息

2.1.1 安装开发依赖babel-plugin-transform-remove-console

npm i babel-plugin-transform-remove-console -D

2.2.2 打开babel.config.js，编辑代码如下：

// 项目发布阶段需要用到的babel插件
const productPlugins = []// 判断是开发还是发布阶段
if (process.env.NODE_ENV === 'production') {// 发布阶段productPlugins.push('transform-remove-console')
}module.exports = {presets: ['@vue/cli-plugin-babel/preset',['@babel/preset-env', { modules: false }] // 让babel转码不要将es6的模块化语法转化为common.js中的require],plugins: [  ...productPlugins]
}

3. 生成打包报告

3.1 命令行形式生成打包报告

控制台执行命令：

vue-cli-service build --report

3.2 使用Vue-Cli3的图形界面查看打包报告

在cmd命令行运行命令： vue ui，可以开启Vue-cli3中提供的一个图形化页面的工具
在Vue项目管理器中，选择导入自己的项目文件夹
点击“任务”=>“build”=>“运行”。运行完毕之后点击右侧“分析”，“控制台”面板查看报告

4. 修改webpack的默认配置

默认情况下，vue-cli 3.0生成的项目，隐藏了webpack配置项，如果我们需要配置webpack，需要通过项目根目录下的 vue.config.js 文件来配置。

Vue-Cli官网关于修改Webpack打包配置：https://cli.vuejs.org/zh/guide/webpack.html，chainWebpack可以通过链式编程的形式，修改webpack配置，configureWebpack可以通过操作对象的形式，修改webpack配置

4.1 修改publicPath

将publicPath设为相对路径。默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my**-**app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。

module.exports = {publicPath: './',...
}

4.2 指定生产模式和开发模式下不同的打包入口文件

为了针对生产模式下的项目打包优化，我们需要针对开发模式和生产模式指定不同的项目打包入口文件。

首先复制项目原有的入口文件main.js，分别命名为main.prod.js和main.dev.js，分别作为生产模式和开发模式下的入口文件。

module.exports = {publicPath: './',chainWebpack:config=>{//生产模式config.when(process.env.NODE_ENV === 'production',config=>{//entry找到默认的打包入口，调用clear则是删除默认的打包入口//add添加新的打包入口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')})}
}

5.加载外部CDN

默认情况下，依赖项的所有import的第三方包都会被打包到js/chunk-vendors.******.js文件中，导致该js文件过大
那么我们可以通过__externals__(外部扩展)排除这些包，使它们不被打包到js/chunk-vendors.******.js文件中，对它们的使用是从window/global全局对象中来获取

externals 对象属性解析：
- 引入项目的包名 : 全局对象中挂载实例的名字

以element-ui举例，我们通过import {Button} from 'element-ui'的方式从element-ui中引入Button按钮， 'element-ui’就是引入的包名。

而element-ui的cdn文件中，暴露出的属性名为’ELEMENT’

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("ELEMENT",["vue"],t):"object"==typeof exports?exports.ELEMENT=t(require("vue")):e.ELEMENT=t(e.Vue)}

所以element-ui的externals的属性值应该是’ELEMENT’

module.exports = {chainWebpack:config=>{//发布模式config.when(process.env.NODE_ENV === 'production',config=>{//entry找到默认的打包入口，调用clear则是删除默认的打包入口//add添加新的打包入口config.entry('app').clear().add('./src/main-prod.js')//使用externals设置排除项config.set('externals',{vue:'Vue','vue-router':'VueRouter',axios:'axios',echarts:'echarts','vue-quill-editor':'VueQuillEditor'})})//开发模式config.when(process.env.NODE_ENV === 'development',config=>{config.entry('app').clear().add('./src/main-dev.js')})}
}

设置好排除之后，为了使我们可以使用vue，axios等内容，我们需要加载外部CDN的形式解决引入依赖项

然后打开public/index.html添加外部cdn引入代码

<!DOCTYPE html>
<html lang=""><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.title %></title><!-- css样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><link href="https://cdn.bootcdn.net/ajax/libs/quill/1.3.4/quill.core.min.css" rel="stylesheet"><link href="https://cdn.bootcdn.net/ajax/libs/quill/1.3.4/quill.snow.min.css" rel="stylesheet"><link href="https://cdn.bootcdn.net/ajax/libs/quill/1.3.4/quill.bubble.min.css" rel="stylesheet"><!-- js --><script src="https://cdn.staticfile.org/vue/2.6.12/vue.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/index.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/zrender/5.0.4/zrender.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/vue-echarts/4.1.0/vue-echarts.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/quill/1.3.4/quill.min.js"></script></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --></body>
</html>

6.定制首页内容

开发环境的首页和发布环境的首页展示内容的形式有所不同
如开发环境中使用的是import加载第三方包，而发布环境则是使用CDN，那么首页也需根据环境不同来进行不同的实现
我们可以通过插件的方式来定制首页内容，打开vue.config.js，编写代码如下：

module.exports = {chainWebpack:config=>{config.when(process.env.NODE_ENV === 'production',config=>{......//使用插件config.plugin('html').tap(args=>{//添加参数isProdargs[0].isProd = truereturn args})})config.when(process.env.NODE_ENV === 'development',config=>{config.entry('app').clear().add('./src/main-dev.js')//使用插件config.plugin('html').tap(args=>{//添加参数isProdargs[0].isProd = falsereturn args})})}
}

然后在public/index.html中使用插件判断是否为发布环境并定制首页内容

<!DOCTYPE html>
<html lang="en"><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 - ' %>电商后台管理系统</title><% if(htmlWebpackPlugin.options.isProd){ %><!-- css样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">........<!-- js --><script src="https://cdn.staticfile.org/vue/2.6.12/vue.js"></script><% } %></head>.......

6. 路由懒加载

当路由被访问时才加载对应的路由文件，就是路由懒加载。
路由懒加载实现步骤：
1.安装 @babel/plugin-syntax-dynamic-import

 npm i @babel/plugin-syntax-dynamic-import -D

2.在babel.config.js中声明该插件，打开babel.config.js

// 项目发布阶段需要用到的babel插件
const productPlugins = []// 判断是开发还是发布阶段
if (process.env.NODE_ENV === 'production') {// 发布阶段productPlugins.push('transform-remove-console')
}module.exports = {presets: ['@vue/cli-plugin-babel/preset',['@babel/preset-env', { modules: false }] // 让babel转码不要将es6的模块化语法转化为common.js中的require],plugins: [// 引入其它插件...productPlugins,'@babel/plugin-syntax-dynamic-import']
}

3.将路由更改为按需加载的形式，打开router.js，更改引入组件代码如下：

import Vue from 'vue'
import Router from 'vue-router'// import HomeView from '../views/home/HomeView'
const HomeView = () => import(/* webpackChunkName:'login_home_welcome' */ '../views/home/HomeView')
// import WelcomeView from '../views/welcome/WelcomeView'
const WelcomeView = () => import(/* webpackChunkName:'login_home_welcome' */ '../views/welcome/WelcomeView')
// import LoginView from '../views/login/LoginView'
const LoginView = () => import(/* webpackChunkName:'login_home_welcome' */ '../views/login/LoginView')

7. 项目上线

7.1 通过node创建服务器

创建一个文件夹zmall_server存放node服务器
使用终端打开zmall_server文件夹，输入命令 npm init -y
初始化包之后，输入命令 npm i express -S
打开zmall项目目录，复制dist文件夹，粘贴到zmall_server中
在zmall_server文件夹中创建app.js文件,编写代码如下：

const express = require('express')const app = express()app.use(express.static('./dist'))app.listen(8999,()=>{console.log("服务已启动 http://127.0.0.1:8999")
})

然后在终端中输入命令 nodemon app.js，启动服务

7.2 开启gzip压缩

打开zmall_server文件夹的终端，输入命令：npm i compression -D
打开app.js,编写代码：

const express = require('express')const compression = require('compression')const app = express()app.use(compression())
app.use(express.static('./dist'))app.listen(8999,()=>{console.log("服务已启动 http://127.0.0.1:8999")
})

7.3 配置https服务

配置https服务一般是后台进行处理，前端开发人员了解即可。
首先，需要申请SSL证书，进入https://freessl.cn官网
在后台导入证书，打开今天资料/素材，复制素材中的两个文件到zmall_server中
打开app.js文件，编写代码导入证书，并开启https服务

const express = require('express')
const compression = require('compression')
const https = require('https')
const fs = require('fs')const app = express()
//创建配置对象设置公钥和私钥
const options = {cert:fs.readFileSync('./full_chain.pem'),key:fs.readFileSync('./private.key')
}app.use(compression())
app.use(express.static('./dist'))// app.listen(8999,()=>{//     console.log("服务已启动 http://127.0.0.1:8999")
// })//启动https服务
https.createServer(options,app).listen(443)

注意：如果我们使用的证书有问题，是无法正常使用https服务

7.4 使用pm2管理应用

打开zmall_server文件夹的终端，输入命令：npm i pm2 -g
使用pm2启动项目，在终端中输入命令：pm2 start app.js --name 自定义名称
查看项目列表命令：pm2 ls
重启项目：pm2 restart 自定义名称
停止项目：pm2 stop 自定义名称
删除项目：pm2 delete 自定义名称