Vue-Cli3多页面配置与编译时构建优化
栏目: JavaScript · 发布时间: 5年前
内容简介：)。说明：a. 两个页面公共的第三方库都被打包在
new_years_festival 和
spring_festival 两个页面，
index.js 为页面入口文件（必须），
config.json 为多页面配置文件(必须
)。
2.2 优化前构建效果
说明：
a. 两个页面公共的第三方库都被打包在 chunk-vendors.js 文件中， 库越多、页面越多，这个vendor就越庞大。
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 配置
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 即可。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- Linux 搭建 Android 编译构建环境
- C++、Python、Rust、Scala 构建编译器的差异性究竟有多大？
- 自动化构建系统 CMake 3.11 现已支持 TI C/C++ 编译器
- Meson 0.50构建系统带来了PGI编译器支持，各种Fortran改进和CUDA
- 基于 Laravel + Vue 构建 API 驱动的 LBS 应用系列教程（十一） —— 通过 Laravel Mix 将 SASS 编译...
- Xcode 编译疾如风系列（二）：并行编译
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
