黑马电商后台管理项目项目优化与上线

1.项目优化与上线

1.1项目优化策略

1.生成打包报告

打包时，为了直观地发现项目中存在的问题，可以在打包时生成报告，生成报告的方式有两种：

①通过命令行参数的形式生成报告(不推荐)

//通过vue-cli的命令选项可以生成打包报告

//–report选项可以生成report.html以帮助分析包内容

vue-cli-service bulid --report

②通过可视化的UI面板直接查看报告（推荐）

在可视化的UI面板中，通过控制台和分析面板，可以方便的看到项目中所存在的问题

下图可以看到每个部分所占的体积，点击控制台可以看到速度统计，资源依赖项

2.通过vue.config.js修改webpack的默认配置

通过vue-cli 3.0 工具生成的项目，默认隐藏了所有webpack的配置项，目的是为了屏蔽项目的配置过程，让程序员把工作的重心，放到具体功能和业务逻辑的实现上。

如果程序员有修改webpack默认配置的需求，可以在项目根目录中，按需创建vue.config.js这个配置文件，从而对项目的打包发布过程做自定义的配置（具体配置参考https://cli.vuejs.org/zh/config/#vue-config-js）

①在根目录中创建vue.config.js

②// vue.config.js

//这个文件中,应该导出一个包含了自定义配置选项的对象

module.exports = {

// 选项…

}

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

默认情况下，vue项目的开发模式与发布模式，功用同一个打包的入口文件（即src/main.js）。为了将项目的开发模式与发布过程分离，

我们可以为两种模式，各自指定打包的入口文件

①开发模式的入口文件为src/main-dev.js

②发布模式的入口文件为src/main-prod.js

4.configureWebpack和chainWebpack

在vue.config.js导出的配置对象中，新增configureWebpack或chainWebpack节点，用来定义webpack的打包配置

在这里：configureWebpack和chainWebpack的作用相同，唯一的区别就是它们修改webpack配置的方式不同：

①chainWebpack通过链式编程的形式，来修改默认的webpack配置

②chainWebpack通过操作对象的形式，来修改默认的webpack配置

5.通过chainWebpack自定义打包入口

代码示例如下：

module.exports = {
chainWebpack: config => {
config.when(process.env.NODE_ENV === ‘production’, config =>{
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’)
})
}
}

6.通过externals加载外部CDN资源

默认情况下，通过import语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，

单文件体积过大的问题

为了解决上述问题，可以通过webpack的externals节点，来配置并加载外部的CDN资源，凡是声明在externals中的第三方依赖包，都不会被打包

具体配置代码如下：

在 vue.config.js 的发布模式的方法快中添加代码
config.set(‘externals’, {
// 如果在打包期间，发现import的一个包名为vue，就不会把这个包合并到文件中
// 而是去window全局查找 Vue 对象，并直接使用
vue: ‘Vue’,
‘vue-router’: ‘VueRouter’,
axios: ‘axios’,
lodash: ‘_’,
echarts: ‘echarts’,
nprogress: ‘NProgress’,
‘vue-quill-editor’: ‘VueQuillEditor’
})
原文链接：https://blog.csdn.net/Kobe_k/article/details/107017630

• 把 main-prod.js 文件中引入的样式表删除（只删除导入的样式）

  

同时，需要在public/index.html文件的头部，添加如下的CDN资源引用：

如果打包后再次运行页面发生页面空白注释掉import VueRouter from ‘vue-router’

7.通过CDN优化ElementUI的打包

虽然在开发阶段，我们启用了element-ui 组件的按需加载，尽可能的减少了打包的体积，但是那些被按需加载的组件，还是占了较大的文件体积，此时，我们可以将element-ui中的组件，也通过CDN的形似来加载，这样能够进一步减小打包后的文件体积

1.在main-prod.js中，注释掉element-ui按需加载的代码

2.在index.html的头部区域中，通过CDN加载element-ui的js和css样式

  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css"/>
  <!-- element-ui的js文件 -->

  <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>

原文链接：https://blog.csdn.net/weixin_50027754/article/details/110947614

8.首页内容定制

不同的打包环境下，首页内容可能会有所不同。我们可以通过插件的方式进行定制，插件配置如下：

module.exports = {
chainWebpack: config => {
// 发布模式
config.when(process.env.NODE_ENV === ‘production’, config => {
// 生产环境定制首页内容

config.plugin(‘html’).tap(args => {

args[0].isProd = true

return args

​ })
​ })
​ config.when(process.env.NODE_ENV === ‘development’, config => {
​ // 开发环境定制首页内容

config.plugin(‘html’).tap(args => {

args[0].isProd = false

return args

​ })
​ })
}
}

在public/index.html首页中，可以根据isProd的值，来决定如何渲染页面结构：

​
​ <% if(htmlWebpackPlugin.options.isProd){ %>

<% }%>

//用判断语句把CDN包裹起来，判断是否显示，进行到这一步把之前注释的vue-router打开，因为这里做了判断条件，不会影响显示

9.路由懒加载

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

具体需要3步

①安装@babel/plugin-syntax-dynamic-import包

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

③将路由改为按需加载的形式，示例代码如下

const Foo = （）= >import (/* webpackChunkName: “group-foo” */ ‘./Foo.vue’)

const Bar = （）= >import (/* webpackChunkName: “group-foo” */ ‘./Bar.vue’)

const Baz = （）= >import (/* webpackChunkName: “group-boo” */ ‘./Baz.vue’)

具体步骤参考文档https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

项目运行时上方显示进度条，安装nprogress插件，运行时依赖–save

1.导入npm install --save nprogress (也可以用vue ui可视化面板直接安装)

2.//导入NProgerss 包对应的JS和CSS（在main.js导入）

import NProgress from ‘nprogress’

import ‘nprogress/nprogress.css’

3.NProgress.start();展示进度条 NProgress.done();隐藏进度条（进度条在发送网络请求时显示，不发送时不显示）

balel-plugin-transfrom-remove-console插件作用：移除项目发布的console打印,就是项目运行时不显示，项目开发时

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

2.在babel.config.js中的plugins增加"transform-remove-console"

3.正式添加，2步骤忽略因为只有发布阶段需要

//这是项目发布阶段需要用到的balel插件

const prodPlugins = []

//if语句作用用来判断是发布阶段还是开发阶段,不同阶段process.env.NOE_ENV的值不同

if (process.env.NOE_ENV === ‘production’) {

prodPlugins.push(“transform-remove-console”)

}

//…展开运算符把数组的每一项展开了放到另一个数组中

​ …prodPlugins

2.1项目上线相关配置

1.通过node创建web服务器

创建node项目，并安装express，通过express快速创建web服务器，将vue打包生成的dist文件夹，托管为静态资源即可，

关键代码如下：

const express = require(‘express’)
// 创建 web 服务器
const app = express()
// 托管静态资源
app.use(express.static(’./dist’))
// 启动 web服务器
app.listen(80,()=>{
console.log(’'web server running at http:127.0.01)
})

①新建一个文件夹，用vscode打开，终端运行npm init -y(初始化一个包配置文件)

②安装express包，命令npm i express -s

③复制项目打包好的dist文件夹到新建文件夹中

④新建 app.js（新建文件夹中）

const express = require(‘express’)
// 创建 web 服务器
const app = express()
// 托管静态资源
app.use(express.static(’./dist’))
// 启动 web服务器
app.listen(80, () => {
console.log(‘web server running at http://127.0.0.1’)
})

⑤启动服务

F:\vue\vue_shop_server>node app.js
web server running at http://127.0.0.1

⑥测试 http://127.0.0.1

以上步骤参考https://blog.csdn.net/chengqiuming/article/details/108629368

2开启gzip配置

①使用gzip可以减小文件体积，使传输速度更快。(打开首页更快)

②可以通过服务器端使用Express做gzip压缩，其配置如下：(在服务端终端进行以下操作，就是新建的文件夹)

//安装相应包

npm install compression -D

//导入包，以下代码写在静态资源托管之前

const compression = require (‘compression’);

//启用中间件

app.use(compression())

3.配置https服务

4.使用pm2管理应用