electron打包速度优化记录

背景

electron打包特别慢，需要20多分钟，非常影响开发和测试，所有便想对这部分进行优化

观察打包过程与整理思路

1.项目基于electron-vue，经过观察，打包分为3部分：主进程打包、渲染进程打包、将上述2者打包到一起，
2.观察结果：第一步观察中打包非常的快，第二步耗时非常的久，第三步主要是卡在了下载最新的electron包上
3.那么主要便是优化第二步，vue部分的打包（第三步在后面会讲）

结论：主要问题出在了webpack配置部分

开始vue部分优化

vue部分优化是老生常谈的，这里我说一下我使用的方法：

1.使用多线程打包（happypack）

安装

yarn add happypack -D

配置

// happypack 配置文件
const Happypack = require('happypack')
const os = require('os')

const happypackThreadPool = Happypack.ThreadPool({ size: os.cpus().length })

module.exports = [
  // 此处使用数组方便后续扩展
  new Happypack({
  	// 创建一个id为babel，使用loader的happypack-loader
    id: 'babel',
    loaders: [
      // 此处写需要使用到的loader
      {
        loader: 'babel-loader',
        options: {
          // 此处的选项和正常使用Babel-loader选项一致
          plugins: ['lodash']
        }
      }
    ],
    threadPool: happypackThreadPool
  })
]

使用

// webpack 配置文件(此处仅写需要改造部分)
const happypackPlugin = require('./happypack')

rules: [
  {
    test: /\.js$/,
    loader: 'happypack/loader?id=babel',
    include: [
      path.resolve('src')
    ]
  }
],

plugins: [
	...happypackPlugin
]

2.使用DLLplugin将部分基本不会变动的库提取，因为这部分如果没有变动，是不需要每次都需要打包的

配置

// webpack.dll.conf.js 配置文件

const path = require('path')
const webpack = require('webpack')

module.exports = {
  entry: {
    vendor: [
      'vue',
      'vuex',
      'vue-router',
      'element-ui',
      'axios',
      'rxdb',
      'rxjs',
      'echarts',
      'pdfjs-dist',
      'uuid'
    ]
  },
  
  output: {
    filename: '[name]_dll.js', // 产生的文件名
    path: path.resolve(__dirname,'../dist/dll'),
    library: '[name]_dll'  // 此处的name需与下面的name保持一致
  },
  
  plugins: [
    new webpack.DllPlugin({
      name: '[name]_dll]',  // 此处的name需与上面的name保持一致
      path: path.resolve(__dirname, '../dist/dll', '[name].dll.manifest.json')
    })
  ]
}

使用

// webpack 配置文件（此处仅写需要改造部分）
const webpack = require('webpack')

module.exports = {
  plugins: [
    // 告诉webpack使用了哪些第三方库代码
    new webpack .DllReferencePlugin({
      content: path.resolve(__dirname),
      manifest: require('../dist/dll/vendor.dll.manifest.json')
    }),
  ]
}

第三步优化

该处优化有2种方案

1.先去淘宝的npm里面将electron需要的压缩包下载好放到对应的目录（如果更新了就需要去重新下载然后放到对应目录）
目录（mac）：~/资源库/Caches/electron/
下载地址：淘宝npm

2.在命令行中运行（首先你需要有一个代理）

export https_proxy=自己的代理地址 http_proxy=自己的代理地址 all_proxy=自己的代理地址

最终效果

打包时间从20多分钟优化到了3分钟左右