airyland / airyland/vux

是否能考虑支持happypack

Đang mở
#2,492 13 bình luận 0 reaction 0 người được giao Xem trên GitHub
vux-loader working
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就没能干预构建过程,导致使用了未进行[按需引入]的版本。
![](https://ws3.sinaimg.cn/large/006tNc79gy1foi4c86cxqj31ig0hgdi6.jpg)

相同模块使用happypack的效果:
![](https://ws1.sinaimg.cn/large/006tNc79gy1foi3z396ugj31kp0xiae4.jpg)

+ 未使用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á.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.