vue-cli打包后 app.css体积过大，请问这个可以怎么解决？

Question

项目使用vue-cli搭建，但是打包后app.css文件有1.22M。请问这个可以怎么优化？
百度主要搜到的是vendor.js的优化，关于css的优化没找到。求教，谢谢

Answer 1

做拆分的化，可以利用 webpack 中的 dll 做一部分的分割，比如第三方等的公用 css 文件。然后再者可以利用 mini-css-extract-plugin 这个插件做各自模块的 css 文件提取（如果用的是webpack4）,webpack3 的化可以用 extract-text-webpack-plugin

Answer 2

app.js也很大了, 有没有使用组件异步加载
如果有多用使用scoped样式, build配置里面allChunks关掉, 禁止合并到app.css

new ExtractTextPlugin({
  ...
  // Setting the following option to `false` will not extract CSS from codesplit chunks.
  // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
  allChunks: false,
})