背景
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分钟左右