webpack性能优化，自定义配置 webpack性能优化，自定义配置

【webpack性能优化，自定义配置】以下是自己的总结：
1，使用静态资源路径

文章图片

在publicPath中写上自己的CDN的路径，设置之后会在所有的资源前加上这个路径前缀，这样在页面在请求资源的时候，就会去CDN上查找请求资源
2，缩小文件搜索范围

文章图片

在loader的rules中设置include，设置之后，就只在设置的路径中区搜索，exclude也可以设置，但是是排除在外，不搜索的路径，一般推荐使用include
3，resolve.extensions
在webpack中，一般只认识 .js .json扩展名的文件，如果在extension中添加的别的扩展名，如下:

文章图片

设置之后，在文件引入的时候就不用写后缀名，webpack会自动补全，但是这样会消耗性能，所以一般不推荐添加其他的后缀名
4，alias（别名）

文章图片

设置别名之后，webpack在查找引入文件的时候就不用一层一层去查找，会直接在别名对应的路径中查找，减少查找时间
5，抽离css文件压缩
使用 MinCssExtractPlugin 来抽离Css
下载： npm install mini-css-extract-plugin -D
引入： const MiniCssExtractPlugin = require（ mini-css-extract-plugin ）
使用：

文章图片

文章图片

抽离之后可以做压缩
使用optimize-css-assets-webpack-plugin 和cssnano（压缩规范）
引入之后配置:

文章图片

6，压缩HTML
下载资源，配置：

文章图片

7，js 摇树