webpack打包优化，首屏加载太慢首屏加载过慢的话，可用webpack打包优化 1.去掉map映射可以看到默认情况下

首屏加载过慢的话，可用webpack打包优化

1.去掉map映射

可以看到默认情况下，打包后在dist目录中，每个文件都会生成文件的.map映射，这个文件是用来定位，当代码发生错误后，报错位置的。如果要上生产环境就建议去掉这个，不去掉的话包就很大。

具体在webpack.config.js中设置productionSourceMap: false,

如图：

这样包的体积就能减少一大半了 2.打包上生产去掉console.log 具体在webpack.config.js中设置

3.webpack**# 分离三方库，提取公共的js

webpack3使用CommonsChunkPlugin插件在webpack4及之后的版本使用SplitChunksPlugin

此处说来话长，下期我单独出一个关于打包分离第三方库的，或者可自行百度操作流程

4.图片懒加载，尽量用import的方式引用图片。图片压缩。

5.cnd引用目的：

. 减小打包文件体积：将第三方库从本地打包中剥离出来，减小了打包文件的体积，提高了页面加载速度。

. 利用CDN加速：通过从CDN加载库，可以利用CDN的分布式网络加速，提高资源加载速度。

. 简化项目配置：不需要将第三方库打包进项目中，减少了配置的复杂性。