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

一、前言

本文介绍的内容包括:

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

Demo下载

二、构建效果

2.1. app目录说明

项目中分别有new_years_festivalspring_festival两个页面,index.js为页面入口文件(必须),config.json为多页面配置文件(必须)。

2.2 优化前构建效果

说明
a. 两个页面公共的第三方库都被打包在chunk-vendors.js文件中,库越多、页面越多,这个vendor就越庞大。
b. new_years_festival页面引用的第三方库有vuespring_festival页面引用的第三方库有vuevue-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 allowedvue-cli版本是3.3.0。官方解释是:

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

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

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

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

回到顶部