1.生成打包报告
打包时，为了直观地发现项目中存在的问题，可以在打包时生成报告。生成报告的方式有两种： ① 通过命令行参数的形式生成报告
// 通过 vue-cli 的命令选项可以生成打包报告
// --report 选项可以生成 report.html 以帮助分析包内容
vue-cli-service build --report
② 通过可视化的UI面板直接查看报告（推荐） （vue ui） 在可视化的UI面板中，通过控制台和分析面板，可以方便地看到项目中所存在的问题。
2. 通过 vue.config.js 修改 webpack 的默认配置
通过 vue-cli 3.0 工具生成的项目，默认隐藏了所有 webpack 的配置项，目的是为了屏蔽项目的配置过程，让程 序员把工作的重心，放到具体功能和业务逻辑的实现上。
如果程序员有修改 webpack 默认配置的需求，可以在项目根目录中，按需创建 vue.config.js 这个配置文件，从 而对项目的打包发布过程做自定义的配置（具体配置参考 cli.vuejs.org/zh/config/#…）。
// 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 配置 ② configureWebpack 通过操作对象的形式，来修改默认的 webpack 配置
两 者 具 体 的 使 用 差 异 ， 可 参 考 如 下 网 址 ： cli.vuejs.org/zh/guide/we…
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 中的第三方依赖包，都不会被打包。
具体配置代码如下：
config.when(process.env.NODE_ENV === 'production', config => { config.entry('app').clear().add('./src/main-prod.js')
config.set('externals', {
vue: 'Vue',
'vue-router': 'VueRouter', axios: 'axios',
lodash: '_', echarts: 'echarts',
nprogress: 'NProgress',
'vue-quill-editor': 'VueQuillEditor'
})
})
同时，需要在 public/index.html 文件的头部，添加如下的 CDN 资源引用：
<!-- nprogress 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
<!-- 富文本编辑器 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
同时，需要在 public/index.html 文件的头部，添加如下的 CDN 资源引用：
<script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
<!-- 富文本编辑器的 js 文件 -->
<script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>
7. 通过 CDN 优化 ElementUI 的打包
虽然在开发阶段，我们启用了 element-ui 组件的按需加载，尽可能的减少了打包的体积，但是那些被按需加 载的组件，还是占用了较大的文件体积。此时，我们可以将 element-ui 中的组件，也通过 CDN 的形式来加 载，这样能够进一步减小打包后的文件体积。
具体操作流程如下： ① 在 main-prod.js 中，注释掉 element-ui 按需加载的代码 ② 在 index.html 的头部区域中，通过 CDN 加载 element-ui 的 js 和 css 样式
<!-- element-ui 的样式表文件 -->
<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>
8.首页内容定制
不同的打包环境下，首页内容可能会有所不同。我们可以通过插件的方式进行定制，插件配置如下：
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 的值，来决定如何渲染页面结构：
<!– 按需渲染页面的标题 -->
<title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title>
<!– 按需加载外部的 CDN 资源 -->
<% if(htmlWebpackPlugin.options.isProd) { %>
<!—通过 externals 加载的外部 CDN 资源-->
<% } %>
9.路由懒加载
1. 安装包 npm install --save-dev @babel/plugin-syntax-dynamic-impor
2. 在babel.config.js配置文件中加入插件
3. 将路由改为按需加载的形式
10.移除代码中的console
打包上线后的console语句没有任何作用，所以我们应该移除它，除去手动移除，还可以使用插件的方式来移除代码里的console语句。
使用 babel-plugin-transform-remove-console 插件来移除代码console
步骤 ：
1.安装 babel-plugin-transform-remove-console
npm install babel-plugin-transform-remove-console --save-dev 2.配置 项目根目录下的 babel.config.js
由于单纯的引用 babel-plugin-transform-remove-console ，会造成无论是开发环境还是运行环境都会运行该插件，但是在开发中console对于我们是有用的，所以如下配置，只有在 production 生产环境下再移除console
11.服务端压缩文件
到了这一步，前端的可压缩空间已经大了，追求极致的要在后端想办法。
创建 node项目，并安装express，通过 express 快速创建web服务器，将vue打包生成的dist 文件夹，托管为静态资源即可，关键代码如下:
开启node服务器采用compression 压缩文件
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')
})
然后安装 compression -> npm install compression
const express = require('express')
const app = express()
let compression = require('compression')
app.use(compression())
app.use(express.static('./dist'))
app.listen(80, () => {
console.log('http:127.0.0.1:80')
})
图片压缩，字体文件== cdn
代码压缩
页面优化 v-once只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能 v-cloak当加载缓慢时可能出现显示vue源码的情况{{name}}，可以使标签加载完成前保持隐藏状态 keep-alive用于缓存组件，tabs组件中就可以适用，减少渲染
