Webpack4.X实战（三）：企业SPA 24点优化总结（上）
2024-02-04 03:48:53
开发/生产环境区分
在开发环境中，一些工具的使用是没有意义的，比如压缩代码、文件名哈希、分离代码等。这不仅会降低开发效率，还会使代码难以调试。因此，需要区分开发环境和生产环境，在开发环境中使用不同的webpack配置。
配置源代码映射
源代码映射是一种将编译后的代码与源代码建立对应关系的技术。当在浏览器中调试代码时，可以通过源代码映射将错误信息映射到源代码中，方便定位错误。
摇树优化
摇树优化（Tree Shaking）是一种通过静态分析来删除未被使用的代码的技术。这可以减小代码体积，提高性能。
作用域提升
作用域提升（Scope Hoisting）是一种将变量和函数声明提升到作用域顶部的技术。这可以提高代码的执行效率。
按需加载
按需加载（Lazy Loading）是一种只在需要时加载代码的技术。这可以减少初始加载时间，提高性能。
代码分割
代码分割（Code Splitting）是一种将代码拆分成多个模块的技术。这可以使代码加载更细粒度，提高性能。
路由懒加载
路由懒加载（Route Lazy Loading）是一种只在需要时加载路由组件的技术。这可以减少初始加载时间，提高性能。
公共代码提取
公共代码提取（Common Code Extracting）是一种将多个模块中公共的代码提取到一个单独的模块中的技术。这可以减少代码体积，提高性能。
长效缓存
长效缓存（Long-Term Caching）是一种将静态资源缓存到浏览器中，并在下次访问时直接从缓存中加载的技术。这可以减少网络请求次数，提高性能。
CDN
CDN（Content Delivery Network）是一种将静态资源分布到多个服务器中的技术。这可以使资源加载速度更快，提高性能。
HTTP/2
HTTP/2是一种新的HTTP协议，它可以同时传输多个请求，并使用二进制格式传输数据。这可以提高性能。
Gzip
Gzip是一种压缩算法，它可以将数据压缩得更小。这可以减少网络请求的大小，提高性能。
代码压缩
代码压缩（Minification）是一种将代码中的空白字符、注释等去除，并使用更短的变量名和函数名来缩小代码体积的技术。这可以减少代码体积，提高性能。
文件名哈希
文件名哈希（File Name Hashing）是一种在文件名中加入哈希值的技术。这可以防止浏览器缓存过期的资源，提高性能。
多页面应用/单页面应用
多页面应用（MPA）是一种将每个页面作为一个单独的模块打包的技术。单页面应用（SPA）是一种将所有页面打包成一个模块的技术。SPA的性能通常优于MPA，但开发难度也更大。
服务端渲染/预渲染/服务端代码生成
服务端渲染（SSR）是一种在服务器上渲染页面，然后将渲染好的HTML发送给浏览器
