webpack 优化启动项目速度

优化 webpack 项目启动速度

有些时候，需要频繁的启动项目，但是如果项目庞大起来，那么启动一次就需要花费非常多的时间，所以我们可以自己优化一下配置，来减少项目的启动时间

babel

如果使用 chrome 浏览器，那么在开发环境下，其实可以关闭 babel 的转义：includes: []。还有可以添加 babel 的缓存：loader: "babel-loader?cacheDirectory=true"

devtool

devtool 是 webpack 用来显示 source map 格式的。

不同的值会明显影响到构建(build)和重新构建(rebuild)的速度

具体可选的值可以查看官网的介绍，而每个值对应不同的构建速度和重构速度。而为了 debugge 项目，我选择了 cheap-module-eval-source-map

exclude

exclude 是 loader 插件用来排除查找目录的，一般是 node_modules目录。exclude: /node_modules/

HappyPack

HappyPack 是用来开启多线程打包的，如果你的项目比较大，那么用它是不错的选择，如果你的项目比较小，不建议使用它，因为有可能返回会变慢。

alias

alias 用来简化查找路径的，一般来说一些脚手架里面会默认配置 @代表 src目录，那么我们可以根据此分别配置不同的内容，来减少一级一级查找。

动态路由

如果你使用 vue，那么可以使用 import 方法来动态的加载路由。并且 webpack 也提供了 require.ensure 来动态加载路由。

hard-source-webpack-plugin

这个 webpack 插件是用来给项目添加缓存的，不仅可以加速项目的启动速度，还可以减少项目的打包速度。而且添加了这个插件后，能够大大提高项目的构建速度。

const HardSourceWebpackPlugin = require("hard-source-webpack-plugin");

new HardSourceWebpackPlugin({
  // cacheDirectory 默认情况下将缓存存储在 node_modules 下的目录中，因此如果清除了node_modules，则缓存也是如此
  cacheDirectory: "node_modules/.cache/hard-source/[confighash]",
  recordsPath: "node_modules/.cache/hard-source/[confighash]/records.json",
  // configHash 在启动 webpack 实例时转换 webpack 配置，并用于cacheDirectory 为不同的 webpack 配置构建不同的缓存
  configHash: function(webpackConfig) {
    return require("node-object-hash")({ sort: false }).hash(webpackConfig);
  },
  // 当加载器、插件、其他构建时脚本或其他动态依赖项发生更改时，hard-source 需要替换缓存以确保输出正确。
  // environmentHash 被用来确定这一点。如果散列与先前的构建不同，则将使用新的缓存
  environmentHash: {
    root: process.cwd(),
    directories: [],
    files: ["package-lock.json", "yarn.lock"]
  }
})