前端优化需要考虑的点以及注意事项

webpack需要考虑的问题(除了开箱即用部分)

1. performance性能警告提示
2. splitChunks分包（合理利用浏览器缓存机制）：

• runtimechunk运行时分包，比如app.vue依赖a.vue，b.vue,如果只是a.vue变化那么只需要a.vue相对应的chunk的hash值变化，而不是app.vue的hash一起跟随变
• cacheGroups:（1）抽离依赖第三方库（node_modules文件夹下）chunkvendors.js,利用dllplugin可加速打包速度，如果第三方较大那么最好是需要cdn方式引入。externals 配置可以剥离第三方库不打进chunkvendors.js（2）抽离公共引入超过2及以上的chunkcommon.js

3. tree-shaking 按需加载配置sideeffect
4. babel-loader 部分加快打包速度（1）需要考虑babelcatch把经过转译后的缓存起来（2）配置不需要转译的exclude和需要转译的include文件夹路径
5. 当我们引用模块时，如果出现import ‘zepto’这样的依赖引入方式，webpack会默认从当前目录往上逐层查找是否有node_modules，然后在node_modules下查找是否存在指定依赖

编码方式上需要考虑的问题

1. 初始化页面如果多个接口请求可利用promise.all并发请求
2. 如果需要请求大量本地静态数据或者依赖库，需要import(**).then()方式按需加载，这样目的会打包出相应的chunk.js，只有当页面触发某个事件才会把相应的chunk.js引入进来，就像路由异步加载组件一样
3. 页面如果有动态控制div块内内容，需要设置div宽高，防止重回和回流影响浏览器的开销
4. 比较大的图片可部署cdn
5. 特定业务场景下，节流和防抖，适用于频繁操作回调之类的
6. 预加载，懒加载
7. webwoker开启多进程

服务端需要考虑的问题

1. 强缓存
2. 协商缓存

分析需要优化的工具

1. webpack插件 webpack-bundle-analyzer
2. 浏览器的Lighthouse，performance

～暂时想到的这么多，后续想到的再补充～