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=>{
//添加参数isProd
args[0].isProd = true
return args
})
})
config.when(process.env.NODE_ENV === 'development',config=>{
config.entry('app').clear().add('./src/main-dev.js')
//使用插件
config.plugin('html').tap(args=>{
//添加参数isProd
args[0].isProd = false
return 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 自定义名称