关于webpack构建优化常用的工具和方法

WKK_

已于 2024-05-27 22:13:16 修改

阅读量173

点赞数 8

文章标签： webpack vue.js 前端 javascript vue

于 2024-05-27 22:12:37 首次发布

本文链接：https://blog.csdn.net/weixin_53812239/article/details/139249323

版权

                    
                        
                    
                    代码分割(Code Splitting)： Webpack 允许将代码拆分为多个包，在需要时进行加载。这降低了应用程序的初始加载时间，提高了性能。
摇树优化（Tree Shaking）： 通过摇树优化，未使用的代码将从最终包中消除，从而减小文件大小。这对使用 ES6 模块的应用程序特别有用，因为它有助于消除死代码。
代码压缩(Minification)： 可以配置 Webpack 来压缩 JavaScript、CSS 和其他资源，通过删除不必要的字符，如注释和空格，减小它们的文件大小。
优化图片和资源： 可以配置 Webpack 来优化图片和其他静态资源，例如压缩图片和将小文件嵌入数据 URL 中，以减少 HTTP 请求。
缓存(Caching)： Webpack 支持缓存以提高构建性能。通过在文件名中使用基于内容的哈希，确保浏览器仅在更改时才下载资源。
并行处理(Parallel Processing)： 使用诸如 thread-loader 或 happypack 等工具，Webpack 可以并行运行加载器以加快构建过程，尤其是在多核机器上。
Webpack 插件： Webpack 有许多可用的插件可用于优化，例如用于代码拆分的 SplitChunksPlugin、用于将 CSS 提取为单独文件的 MiniCssExtractPlugin 和用于 JavaScript 压缩的 TerserPlugin 等。
包分析(Bundle Analysis)： Webpack 提供诸如 webpack-bundle-analyzer 等工具，允许您可视化包和依赖项的大小，帮助您发现优化的机会。
DllPlugin和DllferncePlugin避免重复编译第三方库.
使用HappyelUglifyplugin开启多进程JS文件

                