使用webpack进行web性能优化的探讨

web 打包 运维 部署 webpack

初衷

使用新技术并结合当前正在实施的工程，将新技术的思想应用到老的项目中，为老项目续命。重在学其神而不在于学其形。

引入开发模式和生产模式的概念

当需要在开发人员本地进行bug调试时，开启development模式；当构建生产环境的应用时，开启production模式；

开发环境

引用Qin在掘金的摘要

在开发环境中，我们需要具有强大的、具有实时重新加载(live reloading)、热模块替换(hot module
replacement)能力的 source map(方便开发者调试代码) 和 localhost server（本地服务器）。

大致如下：
1.webpack-dev-server实时重载、热替换
2.不压缩代码
3.css样式不提取至单独的文件中
4.使用sourceMap配置，将源码映射会原始文件（方便调试）
5.不压缩html

生产环境

引用Qin在掘金的摘要

• 在生产环境中，我们的目标则转向于关注更小的 bundle，更轻量的 source map，以及更优化的资源，以改善加载时间。。 大致如下：
  
  1. 不需要实时重载、热替换
  2. 压缩js、css
  3. css样式提取至单独的文件中
  4. sourceMap.
  5. 代码分离（optimization）
  6. 压缩html
  7. 资源缓存（NamedChunksPlugin、HashedModuleIdsPlugin）
  8. 清除dist目录文件

减小前端资源大小

1.优化js、css文件
移除仅在开发环境使用的代码。

2.优化图片
将小的静态图片以base64的数据内联到js或css文件中，减少请求次数。将较大的图片进行压缩处理。

利用好持久化缓存

1.使用长效缓存。
告诉浏览器需要缓存一个文件很长时间（比如，一年）。

2.js和css文件加md5戳进行版本控制。
生成一个映射表，分别对应加md5戳之前和之后的文件名，html文件里内联 runtime chunk 的内容，这样就能根据映射表自动查询到修改后的文件名，不需要手动指定版本号来修改js和css文件的版本了。

3.减少不必要的字节。
压缩所有资源，去除无用代码，谨慎添加依赖。将依赖的第三方库和常用的js文件分别合并压缩，css文件也单独合并压缩。

4.代码懒加载。
通过路由分离代码。只加载当前真正需要的资源，其他的资源延迟加载。

总结

优化web页面的性能，前后端分离是必须要走的一步，只有分离了前端静态资源和后台数据，才能进行有效的静态资源加载优化。

前端web性能优化需要综合考虑框架、规范、工具。没有一成不变适合全部项目的优化方案，只有经过不断调整后最终趋于完善的解决方案。

引用fouber的原话：

所谓框架，主要指模块化框架，其职责包括对模块化资源的管理和加载，管理包括js/css的依赖管理，加载包括按需加载和请求合并，以及资源缓存与更新。

所谓规范，主要是指开发和部署规范，比如哪些是模块化资源，哪些是非模块化资源，模块化资源如何包装、优化和部署，非模块化资源如何部署等，什么文件发布到什么目录，是否有CDN等等。

框架、规范、工具三者需要紧密配合才能比较完美的解决模块化开发、性能优化等前端工程问题。

参考

【译】使用webpack进行web性能优化：减小前端资源大小
【译】使用webpack进行web性能优化：利用好持久化缓存
【译】使用webpack进行web性能优化：监控和分析应用
webpack4-06-开发、生产环境、动态CDN配置
大公司里怎样开发和部署前端代码
Webpack in Visual Studio