一、针对 production 优化：

1、懒加载、按需加载 code-split:  

react-loadable react-loadable/webpack

2、压缩：

 js webpack/lib/optimize/UglifyJsPlugin

 es6  uglifyjs-webpack-plugin

    es6 性能更好， 代码更少。要防止babel-loader转换ES6代码，要去掉 babel-preset-env，因为它把6转换为5。

图 @svgr/webpack  

css  

cssnano基于PostCSS，不仅是删掉空格，还能理解代码含义，例如把color:#ff0000转换成color:red，css-loader内置了cssnano，只需要使用css-loader?minimize就可以开启cssnano压缩。

另外一种压缩CSS的方式是使用PurifyCSSPlugin，需要配合extract-text-webpack-plugin使用，它主要的作用是可以去除没有用到的CSS代码，类似JS的Tree Shaking。

3、tree shaking   

如 lodash 、svg 的编译时引入

mode: product 默认开启 treeshaking

tree shaking 是依赖编译时分析依赖，所以只对 es6 模块语法有效

4、publicPatch   配置 CDN

5、提取公共代码与第三方代码

相同的资源被重复的加载，浪费用户的流量和服务器的成本；

每个页面需要加载的资源太大，导致网页首屏加载缓慢，影响用户体验。 如果能把公共代码抽离成单独文件进行加载能进行优化，可以减少网络传输流量，降低服务器成本

在webpack4.0 optimization.splitChunks替代了CommonsChunkPlugin

vendors 提取公共代码

6、externals

如果我们想引用一个库，但是又不想让webpack打包，并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用，那就可以通过配置externals。

例如从 CDN 中引入 jquery 或 lodash 等库时，就可以把 externals 中配置上 jquery 和 lodash

二、构建速度优化:

1、缩小文件搜索范围

      resolve.modules

      resolve.mainFields

      resolve.extensions

      module.noParse

      配置loader时，通过test、exclude、include缩小搜索范围

2、webpack/lib/DllPlugin  减少基础模块编译次数？

3、使用HappyPack开启多进程Loader转换？

4、babel-loader?cacheDirectory  使用缓存

https://www.webpackjs.com/loaders/babel-loader/#babel-loader-%E5%BE%88%E6%85%A2-

5、resolve.extensions  

import 时不写扩展名时的，扩展名匹配顺序配置

6、module.noParse

用了 noParse 的模块将不会被 loaders 解析，所以当我们使用的库如果太大，并且其中不包含 import require、define的调用，我们就可以使用这项配置来提升性能, 让 Webpack 忽略对部分没采用模块化的文件的递归解析处理。

7、区分环境，减少不必要的程序

如： 可以配置 mode

可以在非 production 环境，可以不压缩

二、开发体验优化：

1、别名: resolve/alias  引入文件更简洁

2、减少不必要的编译，提升开发时构建速度

        devServer :{

                 watch:true,

                 watchOptions: {

                    ignored:/node_modules/,

                    aggregateTimeout:300,//文件变动后多久发起构建，越大越好

                    poll:1000,//每秒询问次数，越小越好

                }

     }

3、cheap-module-eval-source-map 这种 source map 的构建速度比较快

4、实时重新加载(live reloading) 和 模块热替换(HMR)

webpack-dev-server  + devServer  ctrl+s时，浏览器自动重刷

HotModuleReplacementPlugin +  hot: true // 开启HMR

参考：

https://juejin.im/post/5abbc2ca5188257ddb0fae9b

https://juejin.im/post/5ac769e7f265da237b225490

https://juejin.im/post/5ac76a8f51882555677ecc06

https://juejin.im/post/5b652b036fb9a04fa01d616b

1、更高版本的 webpack 和 node 版本。

2、多进程 thread-loader 并行解析编译

3、多进程并行压缩 ParalleUglifyPlugin   Terser-webpack-plugin

4、分包

  html-webpack-externals-plugin  不打基础库的包，直接用 cdn 资源

 split-chunks  还是每次会对基础包进行分析

预编译资源模块 DLLPlugin DLLReferencePlugin 对 react react-dom 以及业务基础包打包成一个文件

5、利用缓存

babel-loader 开启缓存

Terser-webpack-plugin 开启缓存

cache-loaer hard-source-webpack-plugin

6、缩小文件查找范围

babel-loader exclude: 'node_modules'

resolve.modules

resolve.mainFields

resolve.extensions

合理使用 alias

7、tree shaking

要求 es6 语法，.babelrc 的 modules:false, webpack mode 为 production  默认开启 treeshaking

puregecss-webpack-plugin搭配mini-css-extract-plugin

8、webpack 图片压缩

image-wenpack-loader

9、动态 pollyfill 优化体积

babel-pollyfill 是非必需和不变的  pollyfill.io