一、背景

最近公司对前端首页加载性能做了要求，大小不超过 2M，时间不超过 2s，项目部的小伙伴反馈说尝试多次依旧无法完成，所以我也加入进来解决。最终经过将近一天的排查，发现其实他早就完成了，不过由于自己的谷歌浏览器插件有个 js 会随页面加载进来，他没注意到，所以闹了乌龙。但在整个过程中，还是有些小收获，总结下以防忘记。

二、小结

1. 开发环境、生产环境的包大小不同，实际效果要以打包后为准；
2. 性能优化一定要看请求是否开启了 gzip 压缩，开启压缩后会有以下标志：
3. Live Server 这个插件启动的本地服务，不会开启 gzip 压缩（这就是我没注意到的点，导致我定位问题又浪费了时间😭）；
4. 预加载文件，不代表立即执行；
5. node-sass 已经废弃，推荐使用 sass；

    // 安装
    npm install --save-dev sass
    // ⚠️ 如果项目之前用了 /deep/，还需要替换为 ::v-deep

6. package.json 里 scripts 支持 preinstall 和 install 脚本，分别是在安装项目依赖前执行和后执行；

  // 比如这个项目要配置下 git  
  "scripts": {
        "preinstall": "git config --global url.\"https://\".insteadOf git://"
  }

7. git 仓库里有时会配置 npm 的包源地址，会覆盖本地配置（😓 没注意，我还以为我配置不生效了）；

8. 浏览器控制台里，除了当前网站的文件会加载，很多启用的谷歌插件的文件也会加载进来。

三、待解决问题

1. 有无办法开发和生产文件大小保持一致，避免打包才能看效果？
2. 这个项目还有奇怪的一点，使用 import 按需加载，开发环境下不生效，但是使用 require 按需加载就可以生效，初步推测是配置问题导致的