vue实战 | vue移动端项目架构设计

项目相关备注

相关人员 有多人情况下全部列出
- 业务分析师:
- 前端开发人员:
- 后台开发人员:
环境地址 有更多环境依次补全, 以下详情有则补充
- 测试环境
  - 测试环境页面访问地址:
  - 测试环境接口地址:
  - 测试环境部署方式:
- 生产环境
  - 生产环境页面访问地址:
  - 生产环境接口地址:
  - 生产环境部署方式:
补充说明:

vue-cli4 做了哪些功能（已验证）：
1. code spliting 代码分割，将代码按照 html/css/js 的文件进行分 chunk 打包
2. tree shaking 将没有引用到的代码不打包，减少打包的体积和速度
3. hash 实现持久化缓存，当你改变某个文件时，会进行 chunkhash 的改变打包，但当你没有改变文件时，它打包的文件名称和原来的 chunkhash 是一样的
4. 在打包指令加上 --report，可以自动生成一个 report. html 文件，这个文件可以查看你当前项目引用的文件大小，可以很方便的针对大文件库进行针对性的优化，之前需要引用 webpack 插件（webpack-bundle-analyzer）
5. 使用 --modern 构建现代模式的话需要后端做 cors 的配置
6. 没搞明白 --target 在实际场景上有啥用
7. vue-cli-service inspect 可以查看 vue-cli4 集成的 webpack 配置
自己针对 webpack 做的内容：
1. 利用 splitChunks 将每个依赖包单独打包（脚手架只打两个包），在生产环境下配置，优化打包 chunk-vendors.js 文件体积过大
2. terser-webpack-plugin 开启多核压缩 js 代码（脚手架做了），并取消测试环境和生产环境的 console. log() 打印
3. compression-webpack-plugin 开启 gzip 压缩，gizp 压缩是一种 http 请求优化方式，通过减少文件体积来提高加载速度。html、js、css 文件甚至 json 数据都可以用它压缩，可以减小60%以上的体积。 webpack 在打包时可以借助 compression webpack plugin 实现 gzip 压缩
4. 借助 package.json 的 version 对hash进行二次控制（可加可不加，不加的话如果文件没更改，打包出来的文件可以默认使用上一版本的 hash 文件）
5. 压缩css
迭代说明：

FE-linmu/vue-template-project

ErrorLooks like something went wrong!

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Languages

Error
Looks like something went wrong!

Packages