webpack打包构建之性能优化

1 写es6时需要转换工具babel，我们可以只需src目录上转换

rules:[
              {
                //js文件才使用babel
                test:/\.js$/,
                loader:'babel-loader',
                //只在src文件夹下查找
                include:[resolve('src')]，
                //不会去查找的路径
                exclude:/node_modules/
              }
            ]

2 静态资源优化，如果静态资源不大，建议用字节处理

{
    test: /\.(png|jpg|gif)$/,
        use: [
            {
                loader: 'url-loader',
                options: {
                    limit: 1024*num    //文件大于num kb才单独打包成文件
                }
            }
        ] 
}

//
3 使用happypack,把多个loader执行并行起来处理，优化js单线程机制

module:{
        loader:[
           {
                //js文件才使用babel
                test:/\.js$/,
                //只在src文件夹下查找
                include:[resolve('src')]，
                exclude:/node_modules/,
                //id后面的内容对应下面
                loader:'happypack/loader?id=happypack'
           }
        ]
    },
    plugins:[
      new HappyPack({
        id:'happypack',
        loaders:['babel-loader?cacheDirectory'],
        //开启4个线程
        threads:4
      })
    ]

4 使用splitChunk,适合在多入口打包中使用,对公用模块打包时也分别打包到了各自的模块里面，那么我们可以把相同的模块提取出来
5 webpack-parallel-uglify-plugin插件可以并行运行UglifyJS插件，这可以有效减少构建时间，可应用于生产环境而非开发环境，从webpack-parallel-uglify-plugin引入ParallelUglifyPlugin

new ParallelUglifyPlugin({
  cacheDir: '.cache/',
  uglifyJS:{
    output: {
      comments: false
    },
    compress: {
      warnings: false
    }
  }
})

6使用treeshaking实现删除项目中未被引用的代码