如何通过Webpack构建实现代码质量压缩的最佳性能优化方案？

本文共计2009个文字，预计阅读时间需要9分钟。

Webpack构建速度优化，基本优化完成，接下来考虑的便是：线上代码质量的优化，如何使用webpack构建出高质量代码？Webpack构建流程：初始化配置参数+-+绑定事件钩子+-+确定Entry

Webpack构建速度优化基本优化完毕，接下来考虑的就是：线上代码质量的优化，即如何使用webpack构建出高质量的代码

Webpack构建流程：初始化配置参数 -> 绑定事件钩子回调 -> 确定Entry逐一遍历 -> 使用loader编译文件 -> 输出文件

提纲

本次优化构建代码质量基本技术：

• reactRouter按需加载；
• 公共代码提取，以及代码压缩；
• CDN接入；
• 开启gzip压缩；
• 接入treeShaking，剔除无用代码
• 开启Scope Hoisting

（生产环境代码构建）为实时查看每次配置后代码构建情况，使用Webpack监听文件避免每次手动build，并且开启webpack-jarvis，实时查看构建分析，npm i -D webpack-jarvis。