现在很流行使用webpack打包，好处不多说。用了就知道。但是其实配置webpack是挺麻烦得。但是随着wepback4得升级，简化了流程。变得简单了。我这里只是讲解怎么优化webpack打包速度。不讲解基础配置。
注意: 我这个是多页面打包。得方案
优化点1 （optimization.splitChunks）
stats: {
// Add asset Information
assets: false,
// Add children information
children: false,
// Add chunk information (setting this to `false` allows for a less verbose output)
chunks: false,
},
optimization: {
splitChunks: {
cacheGroups: {
nocommon:{
test: (module, chunk) => {
},
chunks: 'initial',
name: 'nocommon',
filename: 'nocommon.[hash:8].js',
priority: 10, // 优先
enforce: true
},
common: { // 将第三方模块提取出来
// test: /(node_modules)/,
// test: /(node_modules)/,
// test: /node_modules\/(?!front-common)/,
test: (module, chunk) => {
if (module.resource) {
}
},
chunks: 'initial',
name: 'common',
filename: 'common.[hash:8].js',
priority: 10, // 优先
enforce: true
}
}
}
},
stats 简化控制台输出内容，好日志。
splitChunks webpack4 自带内容。作用主要是把，公用得文件给抽取出来。防止多次打包，导致提及变慢。可以按照自己得想法打包。
优化点2
ParallelUglifyPlugin
new ParallelUglifyPlugin({
cacheDir: '.cache/',
// Optional regex, or array of regex to match file against. Only matching files get minified.
// Defaults to /.js$/, any f÷
uglifyES: {
// These pass straight through to uglify-es.
// Cannot be used with uglifyJS.
// uglify-es is a version of uglify that understands newer es6 syntax. You should use this option if the
// files that you're minifying do not need to run in older browsers/versions of node.
}
}),
这个主要是开多核压缩，可以使用多进程。
注意：cacheDir: '.cache/',可以生成一个缓存文件夹。
优化点3
new HappyPack({
id: 'happy-babel-js',
loaders: [{
loader: 'babel-loader'
// options: {
// presets: ['@babel/preset-env'], // presets设置的就是当前js的版本
// }
}],
threadPool: happyThreadPool
})
{
test: /\.(js)$/,
// exclude: /(node_modules)/,
// include: [/(src)/, /(node_modules\/front-common)/],
include: [/(src)/, /(node_modules)/],
use: 'happypack/loader?id=happy-babel-js', // 增加新的HappyPack构建loader
},
HappyPack 也是开启多核
这个只是大概列举出来那些东西，提供一个git 仓库。
webpack4极速