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

目录
相关文章
|
15天前
|
JSON 前端开发 JavaScript
webpack学习笔记--优化
webpack学习笔记--优化
|
2月前
|
安全 Linux 开发者
⭐⭐⭐⭐⭐Linux C/C++ 进程崩溃诊断以及有效数据收集:解锁代码问题快速定位与修复的方法
⭐⭐⭐⭐⭐Linux C/C++ 进程崩溃诊断以及有效数据收集:解锁代码问题快速定位与修复的方法
91 1
|
12天前
|
Linux Shell 调度
【Linux系列】fork( )函数原理与应用详解——了解【父子进程及其特性】(代码演示,画图帮助理解,思维导图,精简)(11)
【Linux系列】fork( )函数原理与应用详解——了解【父子进程及其特性】(代码演示,画图帮助理解,思维导图,精简)(11)
|
13天前
|
缓存 JavaScript 前端开发
【TypeScript技术专栏】TypeScript与Webpack构建优化
【4月更文挑战第30天】本文探讨了优化TypeScript与Webpack构建性能的策略。理解Webpack的解析、构建和生成阶段是关键。优化包括:调整tsconfig.json(关闭不必要的类型检查,适配目标环境)和webpack.config.js(配置entry、output、resolve,使用压缩插件)。启用Webpack缓存和增量构建,利用代码拆分与懒加载,能有效提升构建速度和开发效率。
|
26天前
|
Linux Shell vr&ar
进程从代码到二进制到运行时的过程
【4月更文挑战第18天】Linux系统中二进制程序的格式,介绍了ELF(Executable and Linkable Format)格式。
|
2月前
|
消息中间件 并行计算 网络协议
探秘高效Linux C/C++项目架构:让进程、线程和通信方式助力你的代码飞跃
探秘高效Linux C/C++项目架构:让进程、线程和通信方式助力你的代码飞跃
42 0
|
2月前
|
数据采集 调度 计算机视觉
3段代码详解python中的单线程、多线程和多进程
3段代码详解python中的单线程、多线程和多进程
25 0
|
2月前
|
Python
在Python中,如何使用多线程或多进程来实现任务的并行执行?
在Python中,如何使用多线程或多进程来实现任务的并行执行?
148 1
|
3月前
|
前端开发 JavaScript 开发者
深入理解前端性能优化中的Webpack Tree Shaking
【2月更文挑战第2天】在前端开发中,性能优化一直是开发者们不断追求的目标之一。而在这个过程中,Webpack Tree Shaking 技术作为一种重要的优化手段,对于减小前端应用的体积、提高加载速度起到了至关重要的作用。本文将深入探讨Webpack Tree Shaking 技术的原理和实现方式,帮助读者更好地理解并运用这一技术来优化前端应用性能。