第 14 课：Webpack 构建性能优化

背景

应用越复杂，代码量越大，编译的时候所耗费的时间也是越长。在开发阶段，如果编译时间太长，一个小小的变动都要等待很长时间，开发效率非常低。在我们的搭建脚手架的过程中，虽然代码量还不是太大，但也能看到热替换的时候，速度就非常慢。本节我们一起优化 Webpack 的构建性能，提升一下开发体验。

使用缓存

Webpack 的 cache 配置

开启 cache 的情况下，Webpack 会缓存模块和生产的 chunk，下次构建的时候如果内容没有发生变化可以直接复用缓存的内容，改善编译性能。

const merge = require("webpack-merge");
const baseConf = require("./webpack.config.base");
const path = require("path");
const { configureURLLoader } = require("./util");
const devServer = {
  proxy: {
    "/api": "http://localhost:8081"
  },
  contentBase: path.resolve(__dirname, "../dist"),
  hot: true,
  clientLogLevel: "warning",
  compress: true,
  overlay: true,
  open: true,
  port: 3000
};
module.exports = merge(baseConf, {
  mode: "none",
  // 启用缓存
  cache: true,
  devtool: "eval-source-map",