一、前言

本文介绍的内容包括：

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

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即可。

四、结语

完整Demo下载
在实践多页面过程遇到一个问题：在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 选项构建多页面应用时。

只是避免使用，那应该就还是能进行配置。因为本人一些静态资源引用问题需要对路径进行配置，望知情人士能解答一下？
写完回家过年了，预祝大家新春大吉大利[吃鸡.jpg]~