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

Created on 21 Dec 2018 · 35Comments · Source: vuejs/vue-cli

Version

3.2.1

Reproduction link

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

bug cli-service build

Source

wuyuweixin

Most helpful comment

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

jkzing on 6 Jan 2019

👍3

All 35 comments

请提供复现代码。

sodatea on 21 Dec 2018

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

wuyuweixin on 21 Dec 2018

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

wuyuweixin on 21 Dec 2018

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

wuyuweixin on 21 Dec 2018

@sodatea

CaiPeng1989 on 21 Dec 2018

the same

ethanyou725 on 26 Dec 2018

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

WenHaoHuang on 27 Dec 2018

👍2

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

jkzing on 6 Jan 2019

👍3

waiting for PR to release.

wuyuweixin on 7 Jan 2019

Fixed in vue-loader v15.5.1

sodatea on 8 Jan 2019

请提供复现代码。

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

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

是无效的，求助！

orchie on 12 Jan 2019

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

sodatea on 12 Jan 2019

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

endday on 24 Jan 2019

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

sodatea on 24 Jan 2019

"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

endday on 25 Jan 2019

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

CaiPeng1989 on 25 Jan 2019

@endday 似乎都不是空文件？

sodatea on 25 Jan 2019

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

endday on 25 Jan 2019

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

sodatea on 25 Jan 2019

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

gimmyhehe on 26 Jan 2019

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

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

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

endday on 28 Jan 2019

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

jkzing on 28 Jan 2019

@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 on 29 Jan 2019

@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 on 29 Jan 2019

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

tangdaohai on 29 Jan 2019

关于异步组件中打包多个css的问题，请看这里 https://github.com/vuejs/vue-cli/issues/2843#issuecomment-458802639

tangdaohai on 30 Jan 2019

@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 请问结果如何

endday on 1 Feb 2019

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

tangdaohai on 1 Feb 2019

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

endday on 1 Feb 2019

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

tangdaohai on 3 Feb 2019

  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

lagartoLomo on 27 Feb 2019

@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)

jkzing on 27 Feb 2019

👍2

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

lagartoLomo on 27 Feb 2019

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

mumu1993 on 26 Apr 2020

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

lagartoLomo on 26 Apr 2020

Was this page helpful?

0 / 5 - 0 ratings

Related issues

Eject from Vue CLI / Export Webpack Config

dylanized · 29Comments

TypeScript template?

italomaia · 88Comments

SnoreToast is added to the start menu when notifying on Windows

evelynhathaway · 35Comments

vue-cli · Failed to download repo vuejs-templates/webpack: read ECONNRESET

mayefeng · 44Comments

vue-cli-service: command not found

dimavolo · 75Comments