细微思考二十七

[soulJF999]

重构重点在优化每个页面的打包大小。 1.less文件重构：变量定义文件与通用样式文件分离。（合并会导致通用样式被重复多次） 2.import优化：除绝对共用的内容外，其他所有import均在各页面进行，以避免某一页面的依赖会对其它页面打包的大小产生影响 3.utils拆分：举例，原utils.js文件含大量表情包数据，只要引入其中任一方法均会影响最终打包大小。因此将各utils进行了拆分。 4.分享页重构：

1. 共用头尾拆分为独立组件
2. 所有分享类型拆分为各自的组件
3. redirectToApp方法抽离，以支持各处调用
4. 各种类型的分享组件懒加载，避免只看一种类型但被其他类型的分享影响到打包大小

5.css分包：原css打包方式为所有css打入同一个文件（即使是懒加载的包），严重影响最终打包大小。因此改为了拆分模式，vue-loader.conf.js中的extract参数由true改为了false 6.webpack代码重构：合并各环境打包配置，去除无用代码。

存在两种懒加载 1.路由懒加载 2.组件懒加载，分享页的具体某个类型命中在真正用到时（v-if）命中才加载。

除共用css外，所有css文件也同上规则进行分包

gitlab会读取.gitlab-ci.yml的文件并进行执行。 stages：定义构建阶段，一般为deploy，元素顺序决定了对应job的执行顺序

before_script：定义在每个job之前运行的命令

cache：定义一组文件列表，可在后续运行中使用 cache用来指定需要在job之间缓存的文件或目录。只能使用该项目工作空间内的路径。 缓存是在jobs之前进行共享的。如果你不同的jobs缓存不同的文件路径，必须设置不同的cache:key，否则缓存内容会被重写 CI_COMMIT_REF_SLUG：不同的分支采用不同的cache

jobs 每个jobs都必须有唯一的名字

1. script：runner执行的yaml脚本
2. stage：允许一组不同的jobs进入不同的stages
3. only：定义哪些分支和标签的git项目将会被job执行
4. tags：可以从允许运行此项目的所有runners中选择特定的runners来执行jobs

CI_COMMIT_SHA：版本号 CI_COMMIT_REF_NAME：用于构建项目的分支或tag名称 CI_PROJECT_NAME：当前正在构建的项目名称