优化打包
# 优化打包
# 构建打包
在发布上线之前，我们需要执行构建打包，将 .less 、 .vue 、 .js 等相关资源进行编译打包，转换成浏览器可以直接识别运行的普通 css 、 js 、 html 。
# yarn run build 或者 yarn build
npm run build
2
VueCLI 会把打包结果生成存储到项目的 dist 目录中。
正确的话应该会得到这样一个打包结果：
# 本地预览测试打包结果
注意：不能直接双击打开 index.html 运行。
将 dist 放到一个 Web 服务器中运行测试，常见的 Web 服务器：
- Ngxin
- Apache
- tomcat
- IIS
- 。。。。
- Node.js
前端安装配置上面的服务器软件麻烦，这里推荐使用 Vue 官方推荐的一个命令行 http 服务工具：serve (opens new window)。
dist 目录需要启动一个 HTTP 服务器来访问 (除非你已经将 publicPath 配置为了一个相对的值)，所以以 file:// 协议直接打开 dist/index.html 是不会工作的。在本地预览生产环境构建最简单的方式就是使用一个 Node.js 静态文件服务器，例如 serve (opens new window)：
安装：
# yarn global add serve
# 注意：这是在安装全局包，在任何目录执行都可以
# 安装一次就可以了，以后不需要重复安装，顶多升级重装
npm install -g serve
2
3
4
然后在你的项目目录下执行：
# dist 是运行 Web 服务根目录
serve -s dist
2
如果启动成功，你将看到如下提示：
┌────────────────────────────────────────────────────┐
│ │
│ Serving! │
│ │
│ - Local: http://localhost:5000 │
│ - On Your Network: http://192.168.156.90:5000 │
│ │
│ Copied local address to clipboard! │
│ │
└────────────────────────────────────────────────────┘
2
3
4
5
6
7
8
9
10
serve 默认占用 5000 端口并启动一个服务
然后在浏览器中访问给出的地址访问测试。
你自己先大概的测试一下，确保打包结果可以正常运行，然后交由专业的测试人员进行测试。
如果测试出问题怎么办？
- 修改 src 源代码
- 重新构建打包
注意：
不要去修改 dist 中的文件代码，没有用。
因为每次
npm run build都会先把原来的 dist 删除，然后生成新的结果。
# 通过 report 查看不同包打包耗时
vue-cli-service build 会在 dist/ 目录产生一个可用于生产环境的包，带有 JS/CSS/HTML 的压缩，和为更好的缓存而做的自动的 vendor chunk splitting。它的 chunk manifest 会内联在 HTML 里。
这里还有一些有用的命令参数：
--modern使用现代模式 (opens new window)构建应用，为现代浏览器交付原生支持的 ES2015 代码，并生成一个兼容老浏览器的包用来自动回退。--target允许你将项目中的任何组件以一个库或 Web Components 组件的方式进行构建。更多细节请查阅构建目标 (opens new window)。--report和--report-json会根据构建统计生成报告，它会帮助你分析包中包含的模块们的大小。
在 package.json 中 scripts 的 build:'vue-cli-service build --report' 加上 --report 配置
npm run build # 打包
或者直接执行带参数的 build
npm run build --report
打包成功后在 dist 文件夹的 report.html 并在浏览器中打开，通过图形的分析，可以看到每个包的占比.
# Gzip 压缩
Gzip 压缩是一种数据传输过程中的压缩方式，它可以极大的压缩文件的大小。
注意：它不影响原始文件。
HTTP 协议上的 GZIP 编码能帮助我们压缩网站资源文件，减少要传输的文件大小，使流量减少加载更快
如何开启？它需要前后端配置才能使用。后端要把服务器软件开启 Gzip 压缩功能 (主流的服务器软件默认都是开启 Gzip), 客户端不需要做任何处理，取决于浏览器 (太旧的浏览器可能不支持)
如何检测内容是否已开启了 Gzip 压缩？可以查看响应头是否有以下配置
Content-Encoding: gzip
使用 Vue CLI 官方推荐的 serve 命令行工具
#1. 安装 工具
npm install --global serve
# 查看版本
serve --version
# 在打包结果目录执行下面命令启动一个 http 静态服务(默认开启 Gzip 压缩启动服务)
serve -s ./
# 禁用gzip 使用 -u参数
serve -s -u ./
2
3
4
5
6
7
8
9
10
11
# 不打包第三方包
作用：提高编译的速度。
影响打包速度最根本的原因就是某些第三方包体积过大，所以打包速度就很慢。
解决它的办法也非常简单：不对它打包！不要让 webpack 来处理它。
可是不处理它，把它放哪里呢？通过 script 标签加载它，就不被 webpack 处理了。
我们推荐使用第三方的 CDN 来加载资源，所谓的 CDN 说白了就是一个在线链接。
- bootcdn：不错，国内的一个服务
- cdnjs：不推荐，国外的，速度慢
- unpkg：不推荐，国外的，速度慢
- jsdelivr (opens new window) ：国外的，但是在国内有它的服务节点，推荐
- 全球 CDN 优化
- 凡是能通过 npm 下载的包，它里面都有
通过 <script src=''> 标签引用的第三方，wepack 不做任何处理
所以我们可以通过 cdn 来加载第三方，优化打包速度.
https://www.jsdelivr.com/
注意模块版本 详细模块信息 package.json
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/lib/theme-chalk/index.css'>
<!-- 先加载css样式 再引入vue 再引入 element -->
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js'></script>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/lib/index.js'></script>
2
3
4
加载完后，是无法直接使用的 因为我们通过 import 导入
在项目的根目录创建 vue.config.js
/**
* Vue CLI 的配置文件
* 这里可以自定义 VueCLI 内部的 webpack 配置
*/
// 该配置文件必须导出一个对象（Node 中的模块语法）
module.exports = {
// 自定义 VueCLI 中的 webpack 配置
configureWebpack: {
// 告诉 webpack 使用 script 标签加载的那个资源，而不是去 node_moudles 中打包处理
externals: {
// 属性名：你加载的那个包名
// 属性值：script 标签暴露的全局变量，注意，写到字符串中！！！
// 'element-ui': 'ELEMENT'
'vue': 'Vue',
'element-ui': 'ELEMENT',
'echarts': 'echarts'
}
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
重新打包测试。
使用建议：只需要把一些特别大的包处理即可，超过 500kb 的包就做这个处理。