Vue.js
Vue-Cli3多页面配置与编译时构建优化__Vue.js
发布于 3 年前 作者 banyungong 1150 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

一、前言

本文介绍的内容包括：

  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]~

    版权声明：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 作者: wilton_Qiu 原文链接：https://juejin.im/post/6844903773245014023

回到顶部