一、优化babel-loader
开启缓存
module:{
rules:[{
test:/\.js$/,
use:['babel-loader?cacheDirectory'],//开启缓存
include:path.resolve(__dirname,'src')
}]
},
二、IgnorePlugin避免引入无用模块
直接不引入，代码中没有
举例： import moment from 'moment' 默认会引入所有语言js代码，代码过大 webpack.js
plugin:{
new webpack.IgnorePlugin({ resourceRegExp:'/\.\/locale/', contextRegExp:'/moment/' })
},
index.js
import moment from 'moment'
import 'moment/locale/zh-cn' //手动引入中文语言包
moment.locale('zh-cn')
三、noParse避免重复打包
引入，但不打包
module:{
noParse:[/react\.min\.js$/],
},
四、happyPack 多进程打包
项目较大，打包较慢，开启多进程能提高速度
项目较小，打包很快，开启多进程会降低速度(进程开销)
按需使用
module:{
rules:[{
test:/\.js$/,
//把对.js文件的处理交给id为babel的 HappyPack实例
use:['happypack/loader?id=babel'],
include:path.resolve(__dirname,'src')
}]
},
plugin:{
//开启多进程打包
new HappyPack({
//用唯一的标识符id来代表当前的HappyPack是用来处理一类特定的文件
id:'babel',
//如何处理.js文件，用法和Loader配置中一样
loaders:['babel-locader?cacheDirectory']
})
},
ParallelUglifyPlugin 多进程压缩JS
new ParallelUglifyPlugin({
//传递给UglifyJS的参数
//还是使用UglifyJS压缩，只不过帮助开启了多进程
uglifyJS:{
output:{
beautify:false,//最紧凑的输出
comments:false, //删除所有的注释
},
compress:{
//删除所有的 console 语句，可以兼容ie浏览器
drop_console:true,
//内嵌定义了但是只用到一次的变量
collapse_vars:true,
//提取出 出现多次但是没有定义成变量去引用的静态值
reduce_vars:true,
}
}
})
