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倍左右，直接让文件打包速度快了很多。

具体配置

主要是多进程处理，这里追加了4个worker，自己的cpu核心有几个可以配置几个，这个主要加速点
去掉了原来的一个没有用的plugin
增加了缓存机制

'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 = {
// 添加以下一行，设置 mode
mode: 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