webpack打包时间优化

一、添加依赖位置

配置主要的webpack搜索文件的位置，（依赖的包文件主要是从node_module文件夹中查找，项目中自己编写的代码主要是在根目录的src目录下）。配置文件中加入以下代码即可

// webpack-config.js文件
resolve: {
  modules: [
    resolve('src'),
    resolve('node_modules')
  ]
}

二、使用UglifyJS加强版

UglifyJS是一个打包过程中很常见的代码压缩插件（webpack内部集成），采用单线程压缩，速度较慢，可以使用webpack-parallel-uglify-plugin替换。

三、打包类型配置

webpack打包一般分为两种,分模块打包与整体打包

优化原理：通过配置打包结果为整体打包可以优化项目打包速度，与之对应的当然是分模块打包，具体操作请看这里。

分模块打包会提升项目访问速度，因此还是建议牺牲一点打包时间保证更快的项目加载访问速度。

四、打包输出日志优化

优化原理：减少不必要的依赖日志的输出（比如输出每个依赖文件的大小名称等信息）。具体配置如下：

可以通过配置webpack.config.js文件中的state属性实现。

// 快捷配置
status: 'errors-only', // 仅在发生错误时输出
status: 'errors-warnings', // 仅发生错误和警告时输出
status: 'minimal', // 仅在发生错误或新编译时输出
status: 'none', // 关闭所有输出
status: 'normal', // 标准输出
status: 'verbose', // 输出所有

// 自用配置：只输出打包时间等信息
stats:{
  assets: false,
  builtAt: true,
  version: false
}, 

更多详细配置可以参考这里。

当然还有一种更直接的优化方式，使用webpack4替换旧的webpack版本，据说有惊喜呦

END