webpack 性能优化

构建速度

1、优化babel-loader

开启babel-loader?cacheDirectory，指定范围

2、IgnorePlugin

比如一些插件，默认含有多语言文件，比如moment.js

new webpackIgnorePlugin(/\.\/locale,/moment/) 去掉所有语言包

然后手动引入中文语言 包

直接不引入，代码没有

3、noParse

在module.exports={

module:{

noParse:[/react\.min\.js$/]

}

}

引入，但不打包
4、happyPack（多进程打包）

js是单线程，开启多进程打包

安装happyPack ，引入

5、ParallelUglifyPlugin（多进程压缩js）

webpack 内置Uglify工具压缩js，但是是单线程，开启多进程更快

项目较大，打包较慢，开启多进程能提高速度

项目较小，打包很快，开启多进程会降低速度（进程开销）

6、自动刷新

devserver

7、热更新

hotmodulereplacement

8、DllPlugin(动态链接库插件)

可用生产环境

1、优化babel-loader

2、IgnorePlugin

3、noParse
4、happyPack

5、ParalleluglifyPlugin

6、小图片base64(小于5k)

7、bundle 加 hash

8、懒加载（组件或者异步加载）

9、提取公共代码

10、使用cdn加速