webpack 提取异步组件内部 css

webpack 抽取 css 原理

webpack 编译阶段对入口文件使用 extractTextPlugin 提取 css 之后，是（通过 extractTextPlugin 的输出）知道 css 文件的存在，并能通过 HtmlWebpackPlugin 将之插入到 html 文件中的。

简言之，build 的时候是编译阶段，webpack 知道相关信息并能正确处理，异步组件的加载是运行阶段，这时候运行时的代码已经无从得知相关编译信息了，因此异步加载的组件无法提取 css 内容生成单独的文件。

建议将相关的 css 写到一个单独的 test.css 文件中，然后使用 <style src='test.css'> 放到 app.vue 里（注意不要加 scoped），这样就会在 app.[hash].css 中包含这部分 css 了。单独写一个 .css 文件便于代码维护。

为了防止 css 类名冲突，可以在 css 的每个选择子前面加一个 [v-test-component] （含空格）属性选择子前缀，然后将 test.vue 的根元素写成 <div v-test-component></div>。使用 less 或者 sass 统一加前缀可能更为简洁。

[v-test-component] {
  .class-a { color: red; }
  .class-b { color: green; }
  /* other styles */
}

css 打包进异步加载组件的 js 文件中

production 环境默认是会使用 ExtractTextPlugin 将所有样式都提取到一起并且压缩，但是如果想改为将样式打包进 js 只需更改一下配置即可，vue-cli 生成的项目，在 webpack.prod.config.js 中，ExtractTextPlugin 的 allChunks 设为 false，就会将样式打包进 js，但是这样会增加打包文件的体积，不过能够减少首屏的文件体积，因为这样只需加载首屏页面引用到的样式数据。

参考文章