vue webpack打包慢的原因之一

vue webpack打包慢的原因之一

项目使用ts+webpack+vue，发现了npm跑起来和打包起来都非常的慢，经过多番查阅，发现是一个配置得问题

Webpack 配置 TS 和 TSLint 支持

{
      test: /\.tsx*?$/,
      exclude: /node_modules/,
      loader: require.resolve('ts-loader'),
      options: {
        transpileOnly: true,
      },
}

需要注意的是 options 处设置了 transpileOnly 为 true，否则编译会很慢很慢，官方解释是：
As your project becomes bigger and bigger, compilation time increases linearly. It’s because typescript’s semantic checker has to inspect all files on every rebuild. The simple solution is to disable it by using the transpileOnly: true option, but doing so leaves you without type checking.

也就是每次都要跑一边类型检查

注意最后一句话，那如果我们还想要 type checking 怎么办呢，后面接着就解释怎么做了，想看原文的话去 ts-loader 的 GitHub 库看就好了。我就说下是怎么做的。

你需要配置下这个插件 fork-ts-checker-webpack-plugin：

new ForkTsCheckerWebpackPlugin({
  checkSyntacticErrors: true,
  tsconfig: path.resolve(__dirname, 'tsconfig.json'),
  tslint: path.resolve(__dirname, 'tslint.json'),
  watch: ['./src/**/*.tsx'],
  ignoreLints: [
    'no-console',
    'object-literal-sort-keys',
    'quotemark',
  ],
})

把他加入到 Webpack 的 Plugins 中去，然后在 Webpack 启动时他会自动创建一个新进程去做 type checking，和 Webpack 的编译独立开来了，这样就可以在快速编译的同时又可以享受类型检查了。

你还可以使用 Webpack 的另一个插件忽略掉 d.ts 文件，避免因为编译生成 d.ts 文件导致又重新检查。

new webpack.WatchIgnorePlugin([
  /\.d\.ts$/,
]),

在 ts-loader 的仓库中，还有其他的一些提高编译速度的讨论，例如使用 cache-loader 或者 thread-loader，或者使用 happypack，但是这三个库我都试过了，并没有提升，一点提升都没有，反而降速了。。。也有尝试了 awesome-typescript-loader 但编译就直接失败了，想想 ts-loader 跟 ForkTsCheckerWebpackPlugin 一起工作也不慢，就暂时这样了。

*本文转载自 *https://blog.dingxiaolin.com/?p=649.