Vue3 TS类组件项目导入Bootstrap后编译构建速度变慢如何解决

你现在的写法本质是把全量Bootstrap SCSS导入放在了被所有组件重复注入的全局SCSS文件中。vue-cli编译每个Vue单文件组件的SCSS块时，都会把配置的全局注入SCSS完整加载执行一次，相当于项目有多少个组件，就会完整编译一次全量Bootstrap源码，编译量直接翻几十上百倍，不管是dev启动还是生产打包自然会明显变慢。

• 先检查vue.config.js的css.loaderOptions.sass配置，看是否通过additionalData（旧版sass-loader对应配置项为prependData）把你写了Bootstrap导入的全局SCSS文件，自动注入到了所有组件的SCSS编译上下文
• 给构建命令加--verbose参数执行，查看每个SCSS文件的编译耗时占比，确认是否存在Bootstrap内部模块重复编译的问题
• 梳理全局SCSS的引入链路，排查是否存在循环引入、同个Bootstrap模块被多次导入的情况

1. 修正全局SCSS的引入边界（见效最快，能解决90%的问题） #

记住一个原则：只有SCSS变量、mixin、函数这类需要在单文件组件内复用、不会生成实际CSS代码的内容，才适合放到被additionalData全局注入的SCSS文件里。所有会生成实际CSS输出的导入（包括全量Bootstrap、全局重置样式、公共类样式），都不能放到这个注入文件里，否则不仅会重复拖慢编译，还会导致最终打包的样式里出现大量重复代码。
针对Bootstrap的引入，调整步骤如下：

• 新建单独的Bootstrap自定义入口文件，比如src/styles/bootstrap-custom.scss，专门处理Bootstrap的变量覆盖和全量引入：

// 先定义需要覆盖的Bootstrap变量
$primary: #2563eb;
$border-radius: 6px;
$enable-responsive-font-sizes: true;
// 其他自定义变量覆盖...

// 再引入全量Bootstrap源码
@import "bootstrap/scss/bootstrap";

// 最后放你需要全局覆盖的Bootstrap样式规则

• 把这个文件只在项目入口main.ts里引入一次，不要放到全局注入的SCSS里：

import './styles/bootstrap-custom.scss'

• 原来被所有组件注入的公共SCSS文件里，删掉全量Bootstrap的导入语句，如果你需要在组件里用Bootstrap的变量、mixin，只单独引入对应的无CSS输出的依赖文件即可：

// 全局注入的SCSS中仅保留可复用的工具类依赖
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
// 后面放你自己定义的全局变量、mixin、函数

调整完之后，Bootstrap整个源码只会在入口处编译一次，编译耗时会直接回落到未引入Bootstrap时的相近水平。

2. 按需引入Bootstrap模块减少编译量 #

如果项目没有用到Bootstrap的全部组件，不要直接导入全量bootstrap/scss/bootstrap入口，参考Bootstrap官方的模块依赖顺序，只引入你实际用到的模块即可，能大幅减少需要编译的SCSS代码量。比如仅用到栅格、按钮、表单的场景：

// 必须保留的核心依赖
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
// 按需引入实际使用的模块
@import "bootstrap/scss/grid";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/forms";
// 其他用到的模块依次引入

3. 开启编译缓存降低二次构建耗时 #

在vue.config.js中开启SCSS编译缓存和webpack文件级缓存，二次启动dev服务、二次生产构建的速度会有明显提升：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  // 开启webpack文件系统缓存（vue-cli5+支持）
  cache: {
    type: 'filesystem'
  },
  css: {
    loaderOptions: {
      sass: {
        sassOptions: {
          cache: true
        }
      }
    }
  }
})

4. 开发环境使用预编译CSS跳过SCSS编译 #

本地开发阶段不需要实时修改Bootstrap源码的话，可以直接引入官方预编译好的压缩版CSS，跳过Bootstrap的SCSS编译环节，只在生产构建时走自定义SCSS的编译流程，进一步压缩本地dev服务的启动时间：

// main.ts中根据环境区分引入
if (process.env.NODE_ENV === 'development') {
  import 'bootstrap/dist/css/bootstrap.min.css'
} else {
  import './styles/bootstrap-custom.scss'
}

内容的提问来源于stack exchange，提问作者Kylian Lion