是否能考虑支持happypack
- Ngôn ngữ chính
- Vue
- Star
- 17.5k
- Fork
- 3.6k
- Chỉ số merge pull request
- Không có pull request nào được merge trong 30 ngày
Mô tả
@airyland vux贡献者们 新年好~。~
因为业务代码太多,打包时间已经递增到9分钟,尝试了一下happypack,降低了很多,但是发现,vux-loader就没能干预构建过程,导致使用了未进行[按需引入]的版本。

相同模块使用happypack的效果:

+ 未使用happypack时候的配置:
```js
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({size: os.cpus().length})
const merge = require('webpack-merge')
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
const createLintingRule = () => ({
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
})
const webpackConfig = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
chunkFilename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json', '.less', '.styl'],
alias: {
'@': resolve('src'),
'@assets': resolve('src/assets'),
'@api': resolve('src/api'),
'@transcode-types': resolve('src/api/transcode-types.js'),
'@mutation-types': resolve('src/store/mutation-types.js'),
'@styl': resolve('src/assets/styl'),
'@comp': resolve('src/components'),
'@ccomp': resolve('src/base/comm'),
'@bcomp': resolve('src/base/business'),
'@store': resolve('src/store')
}
},
module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
// options: {...vueLoaderConfig,
// loaders: {
// js: 'happypack/loader?id=js'
// }
// },
},
{
test: /\.js$/,
loader: 'babel-loader',
// loader: ['happypack/loader?id=js'],
include: [resolve('src'), resolve('test'), resolve('node_modules/vue-echarts-v3/src'), resolve('node_modules/webpack-dev-server/client'), resolve('node_modules/vue-viewplus/src/')]
},
//...
},
// plugins: [
// new HappyPack({
// id: 'js',
// loaders: ['babel-loader?cacheDirectory=true'],
// threadPool: happyThreadPool
// })
// ],
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}
const vuxLoader = require('vux-loader')
const vuxConfig = require('./vux-config')
module.exports = vuxLoader.merge(webpackConfig, vuxConfig)
```
使用之后的配置:
```js
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({size: os.cpus().length})
const merge = require('webpack-merge')
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
const createLintingRule = () => ({
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
})
const webpackConfig = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
chunkFilename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json', '.less', '.styl'],
alias: {
'@': resolve('src'),
'@assets': resolve('src/assets'),
'@api': resolve('src/api'),
'@transcode-types': resolve('src/api/transcode-types.js'),
'@mutation-types': resolve('src/store/mutation-types.js'),
'@styl': resolve('src/assets/styl'),
'@comp': resolve('src/components'),
'@ccomp': resolve('src/base/comm'),
'@bcomp': resolve('src/base/business'),
'@store': resolve('src/store')
}
},
module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.vue$/,
loader: 'vue-loader',
// options: vueLoaderConfig
options: {...vueLoaderConfig,
loaders: {
js: 'happypack/loader?id=js'
}
},
},
{
test: /\.js$/,
// loader: 'babel-loader',
loader: ['happypack/loader?id=js'],
include: [resolve('src'), resolve('test'), resolve('node_modules/vue-echarts-v3/src'), resolve('node_modules/webpack-dev-server/client'), resolve('node_modules/vue-viewplus/src/')]
},
//....
},
plugins: [
new HappyPack({
id: 'js',
loaders: ['babel-loader?cacheDirectory=true'],
threadPool: happyThreadPool
})
],
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}
const vuxLoader = require('vux-loader')
const vuxConfig = require('./vux-config')
module.exports = vuxLoader.merge(webpackConfig, vuxConfig)
```
Hướng dẫn đóng góp
Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này
Đánh giá
Issue này chưa được đánh giá.