webpack优化篇(四十四):多进程并行压缩代码

简介: webpack优化篇(四十四):多进程并行压缩代码

说明

玩转 webpack 学习笔记



方法一:使用 parallel-uglify-plugin 插件

const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
module.exports = {
    plugins: [
        new ParallelUglifyPlugin({
            uglifyJS: {
                output: {
                    beautify: false,
                    comments: false,
                },
                compress: {
                    warnings: false,
                    drop_console: true,
                    collapse_vars: true,
                    reduce_vars: true,
                }
            },
        }),
    ],
};



方法二:uglifyjs-webpack-plugin 开启 parallel 参数

不支持 es6 语法

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
  plugins: [
    new UglifyJsPlugin({
      uglifyOptions: {
        warnings: false,
        parse: {},
        compress: {},
        mangle: true ,
        output: null,
        toplevel: false,
        nameCache: null,
        ie8: false,
        keep_fnames: false
      },
      parallel: true
    })
  ],
};



方法三:terser-webpack-plugin 开启 parallel 参数(推荐)

支持 es6 语法

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: 4
      })
    ],
  },
};



实战使用 terser-webpack-plugin

先安装依赖,这里使用 1.3.0 的

npm install terser-webpack-plugin@1.3.0 --save-dev


210998da6e8946d2813aa4289aece071.png

如果使用 5.3.5

52ed46ae8e9e416189c00c7e3d25ebc3.png

打包会报错

0885bcb3263e482b9ff1773f6f42d226.png


配置一下

const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true,
      }),
    ],
  },
};


我们先把 parallel 设置成 false


bdaa1589aed04e2780b5f77dff22311a.png



然后把 parallel 设置成 true,开启后速度有了一定的提升。启用多进程并行运行来缩小/最小化 JavaScript 还是很有作用的。


210f324aa16b4428a2cdb3d24f26c80a.png

目录
相关文章
|
8天前
|
JavaScript 前端开发 UED
如何配置 Webpack 进行代码分离?
通过以上方法,可以有效地配置Webpack进行代码分离,根据项目的具体需求和场景选择合适的方式,能够显著提高应用的性能和用户体验。在实际应用中,还可以结合其他优化技术,进一步优化Webpack的打包结果和应用的加载速度。
24 5
|
3月前
|
缓存 前端开发 数据可视化
Webpack Bundle Analyzer:深入分析与优化你的包
Webpack Bundle Analyzer是一款可视化工具,帮助分析Webpack构建结果,找出占用空间较大的模块以便优化。首先需安装Webpack和Webpack Bundle Analyzer,接着在`webpack.config.js`中配置插件。运行Webpack后,会在`dist`目录生成`report.html`,展示交互式图表分析包大小分布。为优化可采用代码分割、Tree Shaking、压缩插件、加载器优化、模块懒加载、代码预热、提取公共库、使用CDN、图片优化、利用缓存、避免重复模块、使用Source Maps、优化字体和图标、避免全局样式污染以及优化HTML输出等策略。
132 3
|
8天前
|
缓存 JavaScript 前端开发
配置 Webpack 进行代码分离的常见方法有哪些?
通过以上常见方法,可以根据项目的具体需求和场景,灵活地配置Webpack进行代码分离,从而提高应用的性能和加载速度,优化用户体验。
17 3
|
15天前
|
缓存 前端开发 JavaScript
前端性能优化:Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中,Webpack和Babel是不可或缺的工具,分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略,包括Webpack的代码压缩、缓存优化和代码分割,以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化,可以显著提升应用的加载速度和运行效率,从而改善用户体验。
35 6
|
16天前
|
缓存 监控 前端开发
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第26天】前端工程化是现代Web开发的重要趋势,通过将前端代码视为工程来管理,提高了开发效率和质量。本文详细对比了Webpack和Gulp两大主流构建工具的选择与配置优化,并提供了具体示例代码。Webpack擅长模块化打包和资源管理,而Gulp则在任务编写和自动化构建方面更具灵活性。两者各有优势,需根据项目需求进行选择和优化。
47 7
|
16天前
|
缓存 前端开发 JavaScript
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第27天】在现代前端开发中,构建工具的选择对项目的效率和可维护性至关重要。本文比较了Webpack和Gulp两个流行的构建工具,介绍了它们的特点和适用场景,并提供了配置优化的最佳实践。Webpack适合大型模块化项目,Gulp则适用于快速自动化构建流程。通过合理的配置优化,可以显著提升构建效率和性能。
30 2
|
2月前
|
前端开发 JavaScript UED
除了 Webpack,还有哪些工具可以进行代码分割?
除了 Webpack,还有哪些工具可以进行代码分割?
|
2月前
|
UED
如何通过 Webpack 实现代码分割?
如何通过 Webpack 实现代码分割?
85 0
|
3月前
|
Java Windows
【Azure Developer】Windows中通过pslist命令查看到Java进程和线程信息,但为什么和代码中打印出来的进程号不一致呢?
【Azure Developer】Windows中通过pslist命令查看到Java进程和线程信息,但为什么和代码中打印出来的进程号不一致呢?
|
2月前
|
存储 监控 安全
探究Linux操作系统的进程管理机制及其优化策略
本文旨在深入探讨Linux操作系统中的进程管理机制,包括进程调度、内存管理以及I/O管理等核心内容。通过对这些关键组件的分析,我们将揭示它们如何共同工作以提供稳定、高效的计算环境,并讨论可能的优化策略。
47 0

热门文章

最新文章