webpack4 target:“electron-renderer“ 打包加速配置

背景

昨天写得一篇Electron-vue asar 局部打包优化处理方案——绕开每次npm run build 超级慢的打包问题-CSDN博客文章浏览阅读754次,点赞19次,收藏11次。因为组员对于 Electron 打包过程存在比较迷糊的状态,且自己也没主动探索 Electron-vue 打包细节,导致每次打包过程都消耗 5-6 分钟的时间,在需要测试生产打包时,极其浪费时间,为此针对 Electron-vue 打包的几个环节进行拆解,来减少打包时间,提高开发效率。https://blog.csdn.net/wangsenling/article/details/142364579

打包超级慢的原因不是最终electron-builder环节的问题,而是webpack打包渲染进程的问题,今天经过与ChatGPT一起优化,终于把速度降了大概5倍左右,直接让文件打包速度快了很多。

具体配置

1. 主要是多进程处理,这里追加了4个worker,自己的cpu核心有几个可以配置几个,这个主要加速点

2. 去掉了原来的一个没有用的plugin

3. 增加了缓存机制

'use strict'process.env.BABEL_ENV = 'renderer'const path = require('path')
const {dependencies} = require('../package.json')
const webpack = require('webpack')const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {VueLoaderPlugin} = require('vue-loader')
const TerserPlugin = require('terser-webpack-plugin');/*** List of node_modules to include in webpack bundle** Required for specific packages like Vue UI libraries* that provide pure *.vue files that need compiling* https://simulatedgreg.gitbooks.io/electron-vue/content/en/webpack-configurations.html#white-listing-externals*/
let whiteListedModules = ['vue', 'element-ui']let rendererConfig = {// 添加以下一行,设置 modemode: process.env.NODE_ENV === 'production' ? 'production' : 'development',devtool: process.env.NODE_ENV === 'production' ? false : '#cheap-module-eval-source-map',entry: {renderer: path.join(__dirname, '../src/renderer/main.js'),},externals: [...Object.keys(dependencies || {}).filter((d) => !whiteListedModules.includes(d)),],module: {rules: [{test: /\.scss$/,use: ['vue-style-loader', 'css-loader', 'sass-loader'],},{test: /\.sass$/,use: ['vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax'],},{test: /\.less$/,use: ['vue-style-loader', 'css-loader', 'less-loader'],},{test: /\.css$/,use: ['vue-style-loader', 'css-loader'],},{test: /\.html$/,use: 'vue-html-loader',},{test: /\.js$/,use: [{loader: 'thread-loader',options: {workers: 4, // 设置 worker 数量},}, {loader: 'babel-loader',options: {cacheDirectory: true}}],exclude: /node_modules/,},{test: /\.node$/,use: 'node-loader',},{test: /\.vue$/,use: {loader: 'vue-loader',options: {extractCSS: process.env.NODE_ENV === 'production',loaders: {sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',scss: 'vue-style-loader!css-loader!sass-loader',less: 'vue-style-loader!css-loader!less-loader',},},},},{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,use: {loader: 'url-loader',query: {limit: 10000,name: 'imgs/[name]--[folder].[ext]',},},},{test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,name: 'media/[name]--[folder].[ext]',},},{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,use: {loader: 'url-loader',query: {limit: 10000,name: 'fonts/[name]--[folder].[ext]',},},},],},node: {__dirname: process.env.NODE_ENV !== 'production',__filename: process.env.NODE_ENV !== 'production',},plugins: [new VueLoaderPlugin(),new MiniCssExtractPlugin({filename: 'styles.css'}),new HtmlWebpackPlugin({filename: 'index.html',template: path.resolve(__dirname, '../src/index.ejs'),templateParameters(compilation, assets, options) {return {compilation: compilation,webpack: compilation.getStats().toJson(),webpackConfig: compilation.options,htmlWebpackPlugin: {files: assets,options: options,},process,}},minify: {collapseWhitespace: true,removeAttributeQuotes: true,removeComments: true,},nodeModules:process.env.NODE_ENV !== 'production'? path.resolve(__dirname, '../node_modules'): false,}),new webpack.NoEmitOnErrorsPlugin(),],output: {filename: '[name].js',chunkFilename: "cities/[name].js",libraryTarget: 'commonjs2',path: path.join(__dirname, '../dist/electron'),},resolve: {alias: {'@': path.join(__dirname, '../src/renderer'),vue$: 'vue/dist/vue.esm.js',},extensions: ['.js', '.vue', '.json', '.css', '.node'],},optimization: {minimize: true,minimizer: [new TerserPlugin({parallel: true, // 开启多线程压缩cache: true,terserOptions: {// 在这里添加 Terser 的配置选项compress: {drop_console: true, // 例如,移除 console.log},},}),],},target: 'electron-renderer',
}/*** Adjust rendererConfig for development settings*/
if (process.env.NODE_ENV !== 'production') {rendererConfig.plugins.push(new webpack.HotModuleReplacementPlugin(),new webpack.DefinePlugin({__static: `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`,}))
}/*** Adjust rendererConfig for production settings*/
if (process.env.NODE_ENV === 'production') {rendererConfig.devtool = ''rendererConfig.plugins.push(new CopyWebpackPlugin([{from: path.join(__dirname, '../static'),to: path.join(__dirname, '../dist/electron/static'),ignore: ['.*'],},]),new webpack.DefinePlugin({'process.env.NODE_ENV': '"production"',}))
}module.exports = rendererConfig

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/880391.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue初学随笔

Vue基础 Vue基本概念 Vue是什么 Vue是一个渐进式的JavaScript框架,它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。 渐进式:各个特性可以根据项目需要逐渐引入和…

C++ | Leetcode C++题解之第429题N叉树的层序遍历

题目&#xff1a; 题解&#xff1a; class Solution { public:vector<vector<int>> levelOrder(Node* root) {if (!root) {return {};}vector<vector<int>> ans;queue<Node*> q;q.push(root);while (!q.empty()) {int cnt q.size();vector<…

【AI学习】Lilian Weng:Extrinsic Hallucinations in LLMs(LLM 的外在幻觉)

来自OpenAI 的 Lilian Weng的《Extrinsic Hallucinations in LLMs》 Date: July 7, 2024 | Estimated Reading Time: 30 min | Author: Lilian Weng 文章链接&#xff1a;https://lilianweng.github.io/posts/2024-07-07-hallucination/ 大概看了一下&#xff0c;这篇文章的核…

深度学习与应用:行人跟踪

**实验 深度学习与应用&#xff1a;行人跟踪 ** ------ **1、 实验目的** ------ - 了解行人跟踪模型基础处理流程 - 熟悉行人跟踪模型的基本原理 - 掌握 行人跟踪模型的参数微调训练以及推理的能力 - 掌握行人跟踪模型对实际问题的应用能力&#xff0c;了解如何在特定的场景和…

MT6765/MT6762(R/D/M)/MT6761(MT8766)安卓核心板参数比较_MTK联发科4G智能模块

联发科Helio P35 MT6765安卓核心板 MediaTek Helio P35 MT6765是智能手机的主流ARM SoC&#xff0c;于2018年末推出。它在两个集群中集成了8个ARM Cortex-A53内核&#xff08;big.LITTLE&#xff09;。四个性能内核的频率高达2.3GHz。集成显卡为PowerVR GE8320&#xff0c;频率…

Snap 发布新一代 AR 眼镜,有什么特别之处?

Snap 发布新一代 AR 眼镜&#xff0c;有什么特别之处&#xff1f; Snap 简介 新一代的 AR 眼镜特点 Snap 简介 Snap 公司成立于 2010 年&#xff0c;2017 年美国东部时间 3 月 2 日上午 11 时许&#xff0c;在纽交所正式挂牌交易&#xff0c;股票代码为 “SNAP”。其旗下的核…

vue循环渲染动态展示内容案例(“更多”按钮功能)

当我们在网页浏览时&#xff0c;常常会有以下情况&#xff1a;要展示的内容太多&#xff0c;但展示空间有限&#xff0c;比如我们要在页面的一部分空间中展示较多的内容放不下&#xff0c;通常会有两种解决方式&#xff1a;分页&#xff0c;“更多”按钮。 今天我们的案例用于…

自建数据库VS云数据库:从《中国数据库前世今生》看未来数据管理的抉择

自建数据库VS云数据库&#xff1a;从《中国数据库前世今生》看未来数据管理的抉择 在数字化时代的滚滚洪流中&#xff0c;数据库作为核心数据管理工具&#xff0c;始终扮演着至关重要的角色。最近观看了纪录片《中国数据库前世今生》&#xff0c;让我对数据库技术的发展有了更…

11. Map和Set

一、二叉搜索树 1. 概念 二叉搜索树又称二叉排序树&#xff0c;它或者是一棵空树&#xff0c;或者是具有以下性质的二叉树&#xff1a; 若它的左子树不为空&#xff0c;则左子树上所有节点的值都小于根节点的值若它的右子树不为空&#xff0c;则右子树上所有节点的值都大于根…

Python爬虫之requests模块(一)

Python爬虫之requests模块&#xff08;一&#xff09; 学完urllib之后对爬虫应该有一定的了解了&#xff0c;随后就来学习鼎鼎有名的requests模块吧。 一、requests简介。 1、什么是request模块&#xff1f; requests其实就是py原生的一个基于网络请求的模块&#xff0c;模拟…

甘蔗茎节检测系统源码分享

甘蔗茎节检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer Vis…

Dependency Check:一款针对应用程序依赖组件的安全检测工具

关于Dependency Check Dependency-Check 是一款软件组合分析 &#xff08;SCA&#xff09; 工具&#xff0c;可尝试检测项目依赖项中包含的公开披露的漏洞。它通过确定给定依赖项是否存在通用平台枚举 &#xff08;CPE&#xff09; 标识符来实现此目的。如果找到&#xff0c;它…

【HTTP】请求“报头”,Referer 和 Cookie

Referer 描述了当前这个页面是从哪里来的&#xff08;从哪个页面跳转过来的&#xff09; 浏览器中&#xff0c;直接输入 URL/点击收藏夹打开的网页&#xff0c;此时是没有 referer。当你在 sogou 页面进行搜索时&#xff0c;新进入的网页就会有 referer 有一个非常典型的用…

绝了,自从用了它,我每天能多摸鱼2小时!

大家好&#xff0c;我是可乐。 俗话说的好&#xff1a;“摸鱼一时爽&#xff0c;一直摸鱼一直爽”。 作为一个程序员&#xff0c;是否有过调试代码熬到深夜&#xff1f;是否有过找不到解决方案而挠秃头顶&#xff1f; 但现在你即将要解放了&#xff0c;用了这款工具——秘塔…

PicoQuant公司的PicoHarp 300停产公告

尊敬的用户&#xff0c;您们好&#xff01; 今天&#xff0c;我们完成了PicoHarp 300最后一份订单&#xff0c;这也是自第一台PicoHarp 300号售出20年后的最后一份订单。 PicoHarp 300作为市场上第一款USB-TCSPC设备&#xff0c;PicoHarp 300已售出约1600台&#xff0c;为Pic…

SpringCloudEureka简介

背景 SpringCloudEureka是基于NetfliEureka做了二次封装&#xff0c;负责微服务架构的服务治理功能。 SpringCloud通过为Eureka增加SpringBoot风格的自动化配置&#xff0c;只需要简单的引入依赖和注解配置&#xff0c;就能让SpringBoot构建的微服务应用轻松和Eureka服务治理体…

安卓13去掉下拉菜单的Dump SysUI 堆的选项 android13删除Dump SysUI 堆

总纲 android13 rom 开发总纲说明 文章目录 1.前言2.问题分析3.代码分析3.1 位置13.2 位置24.代码修改5.编译6.彩蛋1.前言 客户需要去掉下拉菜单里面的Dump SysUI 堆图标,不让使用这个功能。 2.问题分析 android的下拉菜单在systemui里面,这里我们只需要定位到对应的添加代…

找到你的工具!5款免费可视化报表工具对比分析

选择合适的可视化工具对于分析和展示数据至关重要&#xff0c;以下是五款免费的可视化工具&#xff0c;它们各具特色&#xff0c;能够适应各种需求。本文将介绍每款工具的优势与不足&#xff0c;帮助你找到最合适的解决方案。 1. 山海鲸可视化 介绍&#xff1a;山海鲸可视化是…

【Linux】当前进展

驱动层日志添加了下文件目录&#xff0c;函数&#xff0c;代码行的打印&#xff08;这里要小心&#xff0c;驱动目录源代码打印日志里边添进程号可能有问题&#xff0c;因为在驱动初始化的时候&#xff0c;内核还没有创建进程&#xff0c;不过猜测可以先不打印进程相关信息&…

计算机网络34——Windows内存管理

1、计算机体系结构 2、内存管理 分为连续分配管理和非连续分配管理 在块内存在的未使用空间叫内部碎片&#xff0c;在块外存在的未使用空间叫外部碎片 固定分区分配可能出现内部碎片&#xff0c;动态分区分配可能出现外部碎片 3、逻辑地址和实际地址的互相转换 4、缺页中断 …