vue-cli 3.0 引入 vant 打包后样式丢失

一、问题描述

项目技术栈：vue 2.5.17 、typescript、vant。
脚手架：vue-cli 3.0。

问题描述： 通过 ts-import-plugin 实现 vant 按需引入组件，在开发环境正常，打包的生产环境后，vant 组件的样式丢失。

vue.config.js 配置：

module.exports = {
  chainWebpack: config => {
    config.module.rule('ts')
      .use('ts-loader')
      .tap(options => {
        options = merge(options, {
          transpileOnly: true,
          getCustomTransformers: () => ({
            before: [
              tsImportPluginFactory({
                libraryName: 'vant',
                libraryDirectory: 'es',
                style: true
              })
            ]
          }),
          compilerOptions: {
            module: 'es2015'
          }
        });
        return options;
      })
  },
}

二、解决方案

vue.config.js 配置中增加对 parallel 的设置。

parallel: false,

vue-cli 配置说明.png

三、查看打包后的文件

结论：对比 parallel 设置后的变化，可以发现少了一个 css 文件

parallel 开启.png

parallel 关闭.png

四、分析原因

1. vue-cli 3.0 默认开启多线程构建(电脑支持的前提)
   在生产环境下，parallel 默认是开启的，将会使用 thread-loader 加速构建。
   参考资料：vue-cli 配置 parallel

2. thread-loader 作用

把这个 loader 放置在其他 loader 之前， 放置在这个 loader 之后的 loader 就会在一个单独的 worker 池(worker pool)中运行

在 worker 池(worker pool)中运行的 loader 是受到限制的。例如：

• 这些 loader 不能产生新的文件。
• 这些 loader 不能使用定制的 loader API（也就是说，通过插件）。
• 这些 loader 无法获取 webpack 的选项设置。
• 每个 worker 都是一个单独的有 600ms 限制的 node.js 进程。同时跨进程的数据交换也会被限制。

参考资料：thread-loader 文档

3. ts-loader

结论：应该是 ts-loader 在多线程下无法正常工作导致的。

image.png

ts-loader

参考资料：https://medium.com/webpack/typescript-webpack-super-pursuit-mode-83cc568dea79