10优化2-分离代码文件

分离代码文件

这里会稍微深入一些，讲解如何利用浏览器缓存以及在webpack中实现按需加载

分离代码文件

extreact-text-webpack-plugin可分离css。其原因是我们希望更好地利用缓存。不这么做，假如修改了样式，同样的会重新连同JS一起加载，这显然是性能上的浪费。

还有就是多页面场景下，公共部分可公用同一份CSS，因此更好地考虑用缓存来加速静态资源访问，会尝试把公共资源分离出来，避免重复加载。

同理，当JS代码过大时，也可用代码文件拆分方法来进行优化。

webpack 4.x optimization

官方推荐的简单配置：

module.exports = {
  // 其他webpack配置
  optimization: {
    splitChunks: {
      // 所有的chunks代码公共部分分离，成为一个单独文件
      chunks: 'all'
    }
  }
}

我们需要在html中引入构建出来的JS文件，并且common.js需要在入口代码前，示例如下：

<script src="common.js"></script>
<script src="entry.bundle.js"></script>

---

之前提到拆分文件是为了更好地利用缓存，分离公共类库很大程度上是为了让多页面利用缓存，从而减少下载的代码量，同时，也有代码变更时可以利用缓存减少下载代码量的好处。

从这角度出发，建议公共使用的第三方库显示地配置为公共部分，而不是webpack自己判断。因为第三方库使用频率相对低一些，可避免因公共chunk的频繁变更而导致缓存丢失。示例如下：

方式1：

module.exports = {
  entry: {
    vendor: ['react', 'lodash', ...] // 指定公共使用的第三方库
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: 'initial',
          test: 'vendor',
          name: 'vendor', // 使用vendor入口为公共部分
          enforce: true
        }
      }
    }
  },
  // 其他配置
}

方式2

module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /react|lodash/, // 使用test来做路径匹配
          chunks: 'initial',
          name: 'vendor',
          enforce: true
        }
      }
    }
  }
}

方式3

module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        chunks: 'initial',
        // 路径在node_modules目录下的都作为公共部分
        test: path.resolve(__dirname, 'node_modules')
        name: 'vendor',
        enforce: true
      }
    }
  }
}