一、问题描述
项目技术栈：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
四、分析原因
vue-cli 3.0默认开启多线程构建(电脑支持的前提)
在生产环境下，parallel默认是开启的，将会使用thread-loader加速构建。
参考资料：vue-cli 配置 parallelthread-loader作用
把这个 loader 放置在其他 loader 之前， 放置在这个 loader 之后的 loader 就会在一个单独的 worker 池(worker pool)中运行
在 worker 池(worker pool)中运行的 loader 是受到限制的。例如：
- 这些 loader 不能产生新的文件。
- 这些 loader 不能使用定制的 loader API（也就是说，通过插件）。
- 这些 loader 无法获取 webpack 的选项设置。
- 每个 worker 都是一个单独的有 600ms 限制的 node.js 进程。同时跨进程的数据交换也会被限制。
参考资料：thread-loader 文档
- ts-loader
结论：应该是 ts-loader 在多线程下无法正常工作导致的。
image.png
参考资料：https://medium.com/webpack/typescript-webpack-super-pursuit-mode-83cc568dea79
