Vue-Cli3多页面配置与编译时构建优化

一、前言

本文介绍的内容包括：

1. 如何使用vue-cli3进行多页面配置与构建以及遇到的问题；
2. 结合splitChunks分离公共代码块，从而优化运行时加载性能；
3. 结合dllPlugin预构建公共代码块，从而优化编译时的构建速度。
4. 结合webpack-bundle-analyzer输出构建报告
5. 跨域代理配置

Demo下载

二、构建效果

2.1. app目录说明

项目中分别有 new_years_festival和 spring_festival两个页面， index.js为页面入口文件（ 必须）， config.json为多页面配置文件( 必须)。

2.2 优化前构建效果

说明：
a. 两个页面公共的第三方库都被打包在 chunk-vendors.js文件中， 库越多、页面越多，这个vendor就越庞大。
b. new_years_festival页面引用的第三方库有 vue， spring_festival页面引用的第三方库有 vue和 vue-router。

2.3. 优化后构建效果

说明：
a. 自定义 chunk-vendor的打包策略，两个页面公共引用的代码块打包在 chunk-common.js
b. spring_festival中的第三方库抽离为 spring-festival-vendor.js，里面是关于 vue-router的内容（可以根据需要决定是否抽离）。

2.4. dllPlugin预构建效果

说明： vendor.dll.js包含第三方库 vue.js和自己的公共库 utils.js

三、Get Started

如未特殊说明，以下均为vue.config.js中的配置

3.1 多页面配置

3.3 splitChunks代码分离策略

3.4 dllPlugin预构建配置

在最初的写文计划中是没有这一部分的，之前写过一篇文章 webpack编译速度提升之DllPlugin，评论中有个道友提出了疑问，干脆就在这里加点篇幅说明了。其实配置方法跟上篇文章基本一致。

a. 首先定义一个webpack.dll.config.js，内容基本一样，就不再贴了
b. 其次在vue.config.js中加上配置

3.5 analyzer生成构建报告

a. 在vue.config.js配置

b. 在 package.json中定义脚本命令

 "scripts": {
    "analyze": "ANALYZE=true vue-cli-service build"
  },
复制代码

c. 执行npm run analyze并访问localhost:8888即可

3.6 跨域代理

假设前端服务端口为 4000，目标接口为 http://localhost:300/api/get_info，设置代理之后访问 http://localhost:4000/api/get_info即可。

四、结语

1. 完整Demo下载

2. 在实践多页面过程遇到一个问题：在vue.config.js中配置publicPath字段的时候提示错误：ERROR Invalid options in vue.config.js: "publicPath" is not allowed。vue-cli版本是3.3.0。官方解释是：

   相对路径的 publicPath 有一些使用上的限制。在以下情况下，应当避免使用相对 publicPath:
   当使用基于 HTML5 history.pushState 的路由时；
   当使用 pages 选项构建多页面应用时。

   只是避免使用，那应该就还是能进行配置。因为本人一些静态资源引用问题需要对路径进行配置，望知情人士能解答一下？

3. 写完回家过年了，预祝大家新春大吉大利[吃鸡.jpg]~