这三个能够大量缩短打包工夫
效率很好
根本能够缩短不止一倍
一. HappyPack
缩短不止一倍
文件 webpack.base.conf.js
const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({size: os.cpus().length})
plugins: [
new HappyPack({
id: 'aaaaaaaaabbbbbbbccccc',
loaders: [{loader: 'babel-loader?cacheDirectory=true'}],
threadPool: happyThreadPool,
verbose: true
})
],
module: {
rule: [{
test: /\.js$/,
loader: 'happypack/loader?id=aaaaaaaaabbbbbbbccccc',
}]
}
二. autodll-webpack-plugin
git: https://github.com/asfktz/aut…
npm run build –report
能够看到每个文件打包占比图
能够将其中较大的第三方库配置到 dll 中
减小打包后的文件 速度也会快很多
文件 webpack.base.conf.js
plugins: [
new HtmlWebpackPlugin({
inject: true,
template: 'index.html' // 模版文件
}),
new AutoDllPlugin({
path: '/static/js/', // 本人配
inject: true, // 与 html-webpack-plugin 联合应用，注入 html 中
filename: '[name].js',
entry: {
vendor: [
'iview',
'vue-echarts',
'jquery',
'vue',
'codemirror',
'lodash',
]
}
})
],三. webpack-parallel-uglify-plugin
文件 webpack.prod.conf.js
// good
new ParallelUglifyPlugin({
cacheDir: '.cache/',
uglifyJS:{
output: {comments: false},
compress: {warnings: false}
}
}),
替换
// bad
new webpack.optimize.UglifyJsPlugin({
output: {comments: false,},
compress: {
drop_console: true,
pure_funcs: ['console.log'],
// 移除 console
warnings: false
},
cache: true,
parallel: true,
sourceMap: true
}),