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

栏目: JavaScript · 发布时间: 4年前

内容简介:)。说明:a. 两个页面公共的第三方库都被打包在
Vue-Cli3多页面配置与编译时构建优化
项目中分别有 new_years_festivalspring_festival 两个页面, index.js 为页面入口文件(必须), config.json 为多页面配置文件(必须

)。

2.2 优化前构建效果

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

说明:

a. 两个页面公共的第三方库都被打包在 chunk-vendors.js 文件中, 库越多、页面越多,这个vendor就越庞大。

b. new_years_festival 页面引用的第三方库有 vuespring_festival 页面引用的第三方库有 vuevue-router

2.3. 优化后构建效果

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

说明:

a. 自定义 chunk-vendor 的打包策略,两个页面公共引用的代码块打包在 chunk-common.js
b. spring_festival 中的第三方库抽离为 spring-festival-vendor.js ,里面是关于 vue-router

的内容(可以根据需要决定是否抽离)。

2.4. dllPlugin预构建效果

Vue-Cli3多页面配置与编译时构建优化
说明vendor.dll.js 包含第三方库 vue.js 和自己的公共库 utils.js

三、Get Started

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

3.1 多页面配置

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

3.3 splitChunks代码分离策略

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

3.4 dllPlugin预构建配置

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

a. 首先定义一个 webpack.dll.config.js ,内容基本一样,就不再贴了

b. 其次在 vue.config.js 中加上配置

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

3.5 analyzer生成构建报告

a. 在 vue.config.js 配置

Vue-Cli3多页面配置与编译时构建优化
b. 在 package.json

中定义脚本命令

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

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

3.6 跨域代理

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

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Designing with Web Standards (2nd Edition)

Designing with Web Standards (2nd Edition)

Jeffrey Zeldman / Peachpit Press / 2006-07-06 / USD 44.99

Best-selling author, designer, and web standards evangelist Jeffrey Zeldman has updated his classic, industry-shaking guidebook. This new edition--now in full color--covers improvements in best prac......一起来看看 《Designing with Web Standards (2nd Edition)》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具