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');

    /**

    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

相关推荐
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄6 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨7 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL7 小时前
npm入门教程1:npm简介
前端·npm·node.js