非Angular-CLI项目中引入Bootstrap与Material Design CSS的问题

我之前维护非CLI构建的Angular项目时，也碰到过一模一样的头疼问题——要么直接用<link>导致应用加载失败，要么用@include引入牺牲加载性能。这里给你几个实用的解决思路：

1. 排查<link>引入导致Angular加载失败的根源 #

你说直接在index.cshtml里加<link>会让Angular无法加载，大概率不是CSS本身的问题，而是加载顺序、路径错误或者样式冲突：

• 先打开浏览器控制台的「网络」面板，看看Bootstrap/Material的CSS文件是不是返回了404错误——如果路径写错了，浏览器请求失败可能间接阻塞后续脚本执行；
• 把<link>标签移到<body>标签的末尾、Angular初始化脚本（比如main.js）之前，避免CSS加载阻塞Angular的启动；
• 检查有没有全局CSS样式（比如html, body { display: none; }这类）意外隐藏了Angular的根组件，导致看起来像是应用没加载。

如果能解决这个根源问题，用<link>引入自然是最优解——毕竟浏览器能并行下载这些外部CSS，性能最好。

2. 用webpack插件提取独立CSS文件（兼顾运行正常+性能） #

如果<link>的问题暂时搞不定，又不想放弃并行下载的性能，可以借助webpack的插件来优化：

• 使用mini-css-extract-plugin，把你通过require("style-loader!./styles.css")引入的第三方CSS提取成单独的.css文件；
• 在webpack配置里，把Bootstrap和Material的CSS单独作为entry项，或者在styles.css里用@import引入，然后通过插件提取，这样最终打包后会生成独立的CSS文件，浏览器就能并行加载了；
• 示例配置大概是这样：

  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  
  module.exports = {
    module: {
      rules: [
        {
          test: /\.css$/i,
          use: [MiniCssExtractPlugin.loader, 'css-loader'],
        },
      ],
    },
    plugins: [new MiniCssExtractPlugin()],
  };
  

  这样打包后会生成单独的CSS文件，你可以手动在index.cshtml里引入，或者让webpack自动注入，既保证了并行下载，又不会影响Angular应用的加载。

3. 折衷方案：预加载关键CSS #

如果上面的方法都暂时无法实施，还可以用<link rel="preload">来优化@include引入的性能：

• 在index.cshtml里给第三方CSS加预加载标签：

  <link rel="preload" href="path/to/bootstrap.css" as="style">
  <link rel="preload" href="path/to/material.css" as="style">
  

  这样浏览器会提前下载这些CSS文件，就算后续通过@include引入，也能减少等待时间，一定程度上缓解性能问题。

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