使用vue-cli打包的时候生成了很多0KB的chunk-xxxx.css

[wuyuweixin]

Version

3.2.1

Reproduction link

none

Environment info

 System:
   OS: Windows 7
   CPU: (4) x64 Intel(R) Core(TM) i5-4210M CPU @ 2.60GHz
 Binaries:
   Node: Not Found
   Yarn: 1.12.3 - D:\Program Files (x86)\Yarn\bin\yarn.CMD
   npm: 6.4.1 - D:\Program Files\nodejs\npm.CMD
 npmGlobalPackages:
   @vue/cli: Not Found

Steps to reproduce

使用vue-cli打包项目

What is expected?

不要生成0KB的chunk-xxxx.css

What is actually happening?

生成了很多0KB的chunk-xxxx.css

[haoqunjiang]

请提供复现代码。

[wuyuweixin]

在单文件组件内部有style标签,没写样式其实没必要生成css chunk的

[wuyuweixin]

现在只能删除掉组件内部的style标签来解决这个问题

[wuyuweixin]

不知道是不是vue-template-compiler没做判断的问题

[CaiPeng1989]

@sodatea

[ethanyou725]

the same

[WenHaoHuang]

同样的问题困扰很久了。而且不能将项目的CSS文件集中打包到一个文件里。

[jkzing]

It's caused by vue-loader, see above PR for details.

[wuyuweixin]

waiting for PR to release.

[haoqunjiang]

Fixed in vue-loader v15.5.1

[orchie]

请提供复现代码。

chunk自动添加的hash如何去掉？
我尝试vue.config.js中

configureWebpack: config => {
        output: {
            chunkFilename: 'chunk[id].js',
        }
    }

是无效的，求助！

[haoqunjiang]

@orchie https://cli.vuejs.org/zh/config/#filenamehashing 另外请不要在无关 issue 下问问题

[endday]

这个问题在3.3版本依旧存在

[haoqunjiang]

@endday 请提供复现。请确认你项目中的 vue-loader 版本。

[endday]

"vue-loader": "15.6.0"

// vue.config.js

module.exports = {
    indexPath: 'nbAdmin.html',
    runtimeCompiler: true,
    outputDir: 'nbAdmin',
    publicPath: '/static/nbAdmin/',
    css: {
        extract: true
    }
}

  File                                      Size             Gzipped

  nbAdmin\js\chunk-vendors.e6fd8642.js      1007.30 KiB      260.74 KiB
  nbAdmin\js\editShop.6ddf42fd.js           94.96 KiB        30.25 KiB
  nbAdmin\js\accountPage~editShop.64f550    71.19 KiB        25.21 KiB
  74.js
  nbAdmin\js\app.282c72f5.js                58.07 KiB        21.17 KiB
  nbAdmin\js\productData.22c5630e.js        53.30 KiB        31.13 KiB
  nbAdmin\js\accountPage.d497a9ed.js        50.75 KiB        10.67 KiB
  nbAdmin\js\index.302aa235.js              30.42 KiB        20.85 KiB
  nbAdmin\js\appointment.75c245aa.js        28.97 KiB        10.97 KiB
  nbAdmin\js\consult~myProduct~shopfit.3    28.73 KiB        10.59 KiB
  b50bc2b.js
  nbAdmin\js\consult.1ed89763.js            27.83 KiB        10.71 KiB
  nbAdmin\js\service.3ac2e387.js            24.71 KiB        9.84 KiB
  nbAdmin\js\nbProduct.c5d345f4.js          22.72 KiB        9.37 KiB
  nbAdmin\js\subAccount.cbc02900.js         20.77 KiB        7.96 KiB
  nbAdmin\js\finance.21efb80a.js            19.22 KiB        8.81 KiB
  nbAdmin\js\order.65b2d457.js              16.10 KiB        7.53 KiB
  nbAdmin\js\register.41470e93.js           15.02 KiB        6.83 KiB
  nbAdmin\js\myProduct.6931d95f.js          14.85 KiB        4.77 KiB
  nbAdmin\js\findPassword.69365502.js       13.09 KiB        6.29 KiB
  nbAdmin\js\shopfit.2a911d15.js            12.12 KiB        6.14 KiB
  nbAdmin\js\messagePage.6f7d8079.js        11.66 KiB        6.08 KiB
  nbAdmin\js\client.56a2afb1.js             10.80 KiB        3.24 KiB
  nbAdmin\js\singin.f65ccffa.js             10.54 KiB        5.67 KiB
  nbAdmin\js\subLogin.6f5e0d8f.js           10.44 KiB        5.64 KiB
  nbAdmin\js\brand.3c03c29c.js              9.88 KiB         3.42 KiB
  nbAdmin\js\tempDetail.a04922cf.js         6.63 KiB         2.40 KiB
  nbAdmin\js\template.1520dfeb.js           5.36 KiB         1.81 KiB
  nbAdmin\js\protocol.102202e2.js           5.32 KiB         3.55 KiB
  nbAdmin\js\orderDetail.3c1001f9.js        5.21 KiB         1.75 KiB
  nbAdmin\js\editBanner.b946b14a.js         5.11 KiB         2.17 KiB
  nbAdmin\js\login.c0af9225.js              0.62 KiB         0.38 KiB
  nbAdmin\css\editShop.06c4d084.css         43.26 KiB        10.44 KiB
  nbAdmin\css\consult.e95ee6ac.css          23.16 KiB        9.60 KiB
  nbAdmin\css\chunk-vendors.91927107.css    20.82 KiB        3.86 KiB
  nbAdmin\css\app.43972987.css              12.97 KiB        3.15 KiB
  nbAdmin\css\appointment.fd8e76ea.css      10.30 KiB        3.11 KiB
  nbAdmin\css\nbProduct.1d1209b6.css        6.38 KiB         1.80 KiB
  nbAdmin\css\editBanner.b56d9aa3.css       3.81 KiB         1.84 KiB
  nbAdmin\css\service.8cfbc217.css          3.13 KiB         0.91 KiB
  nbAdmin\css\shopfit.e12a5a04.css          3.13 KiB         1.45 KiB
  nbAdmin\css\messagePage.5063c98f.css      2.97 KiB         0.69 KiB
  nbAdmin\css\myProduct.720ca20a.css        2.84 KiB         0.87 KiB
  nbAdmin\css\brand.07e91bac.css            2.26 KiB         0.60 KiB
  nbAdmin\css\register.b92c14a4.css         1.99 KiB         0.63 KiB
  nbAdmin\css\finance.30152d5b.css          1.95 KiB         0.66 KiB
  nbAdmin\css\productData.01c9b646.css      1.79 KiB         0.65 KiB
  nbAdmin\css\index.2bab0565.css            1.55 KiB         0.50 KiB
  nbAdmin\css\order.06de9504.css            1.13 KiB         0.43 KiB
  nbAdmin\css\tempDetail.a3db05cf.css       0.88 KiB         0.37 KiB
  nbAdmin\css\client.f84d5e58.css           0.76 KiB         0.32 KiB
  nbAdmin\css\subAccount.902de275.css       0.72 KiB         0.35 KiB
  nbAdmin\css\singin.24a20330.css           0.66 KiB         0.32 KiB
  nbAdmin\css\subLogin.ad2d3774.css         0.53 KiB         0.29 KiB
  nbAdmin\css\template.79678745.css         0.52 KiB         0.26 KiB
  nbAdmin\css\orderDetail.cd1b9e62.css      0.48 KiB         0.25 KiB
  nbAdmin\css\protocol.c652cfd0.css         0.29 KiB         0.19 KiB
  nbAdmin\css\login.a2d16624.css            0.17 KiB         0.14 KiB
  nbAdmin\css\findPassword.0e433876.css     0.00 KiB         0.02 KiB
  nbAdmin\css\accountPage.8b5fefc0.css      0.00 KiB         0.02 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The nbAdmin directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
                                  

Process finished with exit code 0

[CaiPeng1989]

@endday 同样的 vue-loader 版本和 css.extract = true，没有生成空的css文件。

[haoqunjiang]

@endday 似乎都不是空文件？

[endday]

里面的内容是空的，但是有两行空行，估计是这个占了0.02KiB

[haoqunjiang]

@endday 能提供一下实际的复现代码吗？按理来说只有空行应该会被过滤的

[gimmyhehe]

上面这种情况是可以把空的CSS文件去掉了，@endday可能是遇到了下面这种情况 @sodatea

[endday]

@sodatea 应该是两个style标签导致的问题，打包的时候只抽取了第一个style标签内的样式

当我注释掉第一个style，打包抽取的样式就正常了，还没有测试样式会不会遗漏，不太确定第二个style的样式有没有打包

这种完全没有style的情况也会打包出一个空的css
上述的情况都是使用了路由懒加载的

[jkzing]

@endday 请提供一下复现代码，github repo 或者打包成 zip 都可以

[tangdaohai]

@sodatea @jkzing https://github.com/tangdaohai/css-extract-true
其实重现很简单，我用 vue-cli 初始化项目之后，只在about.vue中增加了一行样式

<style scoped>
.about h1 {
  margin-top: 30px;
}
</style>

然后运行 npm run build 会得到两个css文件：

---

vue-loader版本：15.6.2

dependencies：

{
  "dependencies": {
    "vue": "^2.5.21",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.3",
    "@vue/cli-plugin-eslint": "^3.0.3",
    "@vue/cli-service": "^3.0.3",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.5.21"
  }
}

[endday]

@sodatea @jkzing https://github.com/tangdaohai/css-extract-true
其实重现很简单，我用 vue-cli 初始化项目之后，只在about.vue中增加了一行样式

<style scoped>
.about h1 {
  margin-top: 30px;
}
</style>

然后运行 npm run build 会得到两个css文件：

vue-loader版本：15.6.2

dependencies：

{
  "dependencies": {
    "vue": "^2.5.21",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.3",
    "@vue/cli-plugin-eslint": "^3.0.3",
    "@vue/cli-service": "^3.0.3",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.5.21"
  }
}

谢谢老铁热心提供复现

[tangdaohai]

好像是因为异步组件加载的机制导致，难道code splitting的优先级要比 vue.config.js 中的 css.extract = true要高？但有些业务场景下，真的需要css打包进一个文件...

[tangdaohai]

关于异步组件中打包多个css的问题，请看这里 #2843 (comment)

[endday]

@endday 请提供一下复现代码，github repo 或者打包成 zip 都可以

@jkzing

test-cli-build.zip

路由组件

<template>
    <div class="about">
        <h1>This is an about page</h1>
    </div>
</template>
<script>
import testStyle from '../components/testStyle'
export default {

}
</script>
<style scoped lang="scss">

</style>

引入的组件testStyle

<template>
  <div class="hello">
    
  </div>
</template>
<script>
export default {
  name: 'testStyle',
  props: {
    msg: String
  }
}
</script>

<style scoped>

</style>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

  File                                      Size             Gzipped

  dist\app.js                               1267.40 KiB      309.01 KiB
  dist\about.js                             62.19 KiB        8.63 KiB
  dist\app.b1b7086392cd2f9be5ac.hot-upda    6.31 KiB         1.02 KiB
  te.js
  dist\about.b1b7086392cd2f9be5ac.hot-up    3.30 KiB         0.96 KiB
  date.js
  dist\css\app.9ac9fe6f.css                 0.31 KiB         0.22 KiB
  dist\css\about.b6816049.css               0.00 KiB         0.02 KiB

  Images and other types of assets omitted.

 DONE  Build complete. Watching for changes...

testStyle组件中我使用了两个style标签，其中第一个为空，这就是打包会出现0kb的css的trunk的原因

ps：我已经在其他电脑稳定复现了这种情况

@jkzing 请问结果如何

[tangdaohai]

@endday 我感觉应该是你vue-loader版本问题导致的。我试过是不会打包空的css文件的

[endday]

请问是用我上述的那个回复来打包的吗，我vuecli的版本是3.4，vueloader的版本是15.6.2
@tangdaohai

[tangdaohai]

@endday 不是，cli初始化后的。

[adomened]

  File                                    Size              Gzipped

  dist/js/chunk-516b138f.c656895e.js      1108.88 KiB       206.79 KiB
  dist/js/chunk-460f3496.1290bb6c.js      497.19 KiB        149.71 KiB
  dist/js/chunk-vendors.528f127c.js       252.28 KiB        82.48 KiB
  dist/js/app.e8ab96e4.js                 134.78 KiB        29.48 KiB
  dist/js/chunk-dee678aa.2ebe183e.js      64.51 KiB         15.00 KiB
  dist/js/chunk-70566bb7.e4b10c18.js      21.16 KiB         5.82 KiB
  dist/js/chunk-2d21082b.5fced651.js      16.41 KiB         4.12 KiB
  dist/js/chunk-5d5e045e.2cf0f054.js      5.76 KiB          1.76 KiB
  dist/css/app.2fabce6d.css               299.31 KiB        47.91 KiB
  dist/css/chunk-460f3496.c733b4c6.css    3.66 KiB          0.98 KiB
  dist/css/chunk-516b138f.5948bc5d.css    0.75 KiB          0.38 KiB
  dist/css/chunk-5d5e045e.16d0fafc.css    0.74 KiB          0.32 KiB
  dist/css/chunk-dee678aa.7806c32e.css    0.18 KiB          0.14 KiB
  dist/css/chunk-vendors.c3746e94.css     0.00 KiB          0.02 KiB

In vendors it still happens

[jkzing]

@ID8323 Please bump vue-loader version to 15.6.4, see https://github.com/vuejs/vue-loader/blob/master/CHANGELOG.md#1564-2019-02-19. (npm list vue-loader or yarn list vue-loader to see current version of vue-loader)

[adomened]

I updated and the problem persisted. The problem was when doing the next import (an empty css file):

import vuescroll from 'vuescroll'
**import 'vuescroll/dist/vuescroll.css'**

By the way, do you know of an alternative to VueScroll?

thanks @jkzing

[mumu1993]

现在还有这个问题啊 ，请问什么时候能修复呢？

[adomened]

The problem was already solved thanks to the comment of the previous colleague. Thank you.

[cappuccino6]

How to resolve this problem?