项目构建部署相关

[lewenweijia]

前端项目

速度优化和体积优化

项目分析: 构建速度分析 + 构建体积分析

1. 构建速度分析: speed-measure-webpack-plugin
2. 构建体积分析: webpack-bundle-analyzer

项目优化: 构建速度优化 + 构建体积优化

1. 构建速度优化策略

  - 工具本身: 优先采用高版本Node.js和Webpack -> webpack4 直接默认提升40%左右的啊
  - 开启多进程/多实例构建:  
      happypack(webpack3中的社区方案, 已经不活跃)/parallel-webpack
     /thread-loader(webpack官方答案)h
  - 

2. 构建体积优化?:

• 第三方库: 通用文件cdn化: externals化(react / react-dom等库文件)
• 业务代码: 代码分割, 代码懒加载
  具体的: 通过import()语法实现自动动态模块分包

MISC

对于软件来说, 性能往往不是最大的问题, 性能可以通过软件的不断迭代的过程中
不断地去提升 (PHP7的JIT, 即时编译, V8)

[lewenweijia]

构建配置管理策略

1. 单文件, 环境变量分支控制
2. 多文件
3. 单独npm配置包 (中等规模团队) => 构建配置包
4. cli工具 (大规模团队, 外加项目脚手架等功能)

规范?: git commit规范, readme规范, eslint规范, semver规范
质量: 冒烟测试(预测试), 单元测试, 覆盖率 和 持续集成(CI)

• 通过规范+质量约束保证该配置包长期的可维护性和可用性

多配置文件
基础配置: webpack.base.js
开发配置: webpack.dev.js
生产配置: webpack.prod.js
ssr配置: webpack.ssr.js
pwa配置: webpack.pwa.js

配置文件之间的有效组合: webpack-merge -> 实用的功能的啊

[lewenweijia]

MISC

项目的目录结构设计

layout层用vw和vh
组件层用px

这里我们需要对照下之前的功能模块设计

.gitignore? -> 前缀 / => 代表文件

[lewenweijia]

所有计算机系统都可以通过加入缓存来提升性能, 空间换时间的经典案例

对首次构建速度没什么用
缓存? 提升二次构建速度
代码里面也经常应用缓存策略

一堆哈希, 有点时间换无状态
总想着包一层, 对外屏蔽, 以后方便替换
刚好有经历团队webpack3 -> webpack4的过渡过程
大佬在改动, 有关注和跟进, 顺带补一些知识点

1. 编译缓存: babel-loader开启换粗
2. 压缩缓存: terser-webpack-plugin开启parellel: true 和 cache: true
3. 模块缓存: cache-loader

vw只支持android4.4和ios8以上. 不考虑兼容性, vm完全没问题
功能提交后, 一堆兼容bug单
基本一套样式适配所有的手机设配屏幕