webpack性能优化

1.source-map

因为经过webpack压缩，一般很难找出发生错误的代码，source-map构建了压缩前的代码和压缩后的代码之间的桥梁。主要是方便开发人员的错误定位。****注意区分开发环境和生产环境

// 开发环境
   eval-source-map  
  // 目前vue脚手架，react脚手架开发环境正在使用eval-source-map

// 生产环境
nosource-source-map // 隐藏构建前后的源代码
hidden-source-map //隐藏构建前的源代码，会提示构建后的代码错误
source-map // 让调试更加友好
注意：根据自己的需要选取最合适的方案

2.loder中属性

• enforce：“pre” ， // 指定此loader优先执行
• oneOf：[] // 指定只执行一种loader，不会同一种类型文件执行多个loader， 如果多种配置处理同一种类型文件，只需要将其单独提出到rules中

3.babel 缓存

设置cacheDirectory：true （建议文件打包时候加入contenthash值，不然使用了强制缓存会存在，缓存期间无法更新修改文件的bug）

4.tree shaking 去除无用代码

1.必须使用es6模块化， 2.必须开启production模式
注意： 不需要额外的配置，根据版本的不同，会出现（副作用）文件丢失的问题，设置sideEffects

5.js分包

由于一个js文件过于庞大，把一个文件分成多个文件，实现按需加载。

// webpack.config.js中配置optimization
optimization： {
   splitChunks：{
      chunks： ‘all’
   }
}

// import动态导入
import（/*webpackChunkName: '文件名'*/ ‘文件url’）
 .then(() => {
 })
 .catch(()=> {
 })

结合这两种方式可以实现js分包

6.js懒加载和预加载

懒加载：文件需要的时候加载文件， 缺点是首次加载的时候会有一定的卡顿。（适合与移动端开发）
预加载；等其他资源加载完毕，主线程空闲的时候加载文件， 缺点是兼容性不好。（适用与pc端开发）

// 实现懒加载, 事件回调的时候使用js分包的方式加载需要的文件：
document.getElementById('btn').onclick(() => {
	import（/*webpackChunkName: '文件名'*/ ‘文件url’）
	 .then(() => {
     })
    .catch(()=> {
     })
})

// 实现预加载，再懒加载的基础上加入webpackPrefetch
document.getElementById('btn').onclick(() => {
	import（
	/*webpackChunkName: '文件名'*/，
	 webpackPrefetch：true 
	 ‘文件url’
	 ）
	 .then(() => {
     })
    .catch(()=> {
     })
})

7.cdn 引入

cdn引入配合webpack的externals属性使用，优化打包体积

// webpack.config.js中配置
 externals： {
  jquery：jQuery // 拒绝jquery被打包
 }

注意： html中还需引入jqery， cdn的方式引入。