Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

vue-cli-service build js和css加载顺序反了 #1978

Closed
zlab opened this issue Jul 29, 2018 · 10 comments
Closed

vue-cli-service build js和css加载顺序反了 #1978

zlab opened this issue Jul 29, 2018 · 10 comments

Comments

@zlab
Copy link

zlab commented Jul 29, 2018

Version

3.0.0-rc.9

Node and OS info

yarn1.7, win 10

Steps to reproduce

  1. yarn global add @vue/cli
  2. vue create vue3_demo
  3. yarn build
  4. cat dist/index.html

What is expected?

app.css和app.js应该在chunk.css和chunk.js后面

<script src=/js/chunk-vendors.90e4c57a.js></script>
<script src=/js/app.aa40921b.js></script>

What is actually happening?

<script src=/js/app.aa40921b.js></script>
<script src=/js/chunk-vendors.90e4c57a.js></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <meta http-equiv=X-UA-Compatible content="IE=edge">
  <meta name=viewport content="width=device-width,initial-scale=1">
  <link rel=icon href=/favicon.ico>
  <title>vue3_demo</title>
  <link as=style href=/css/app.eca329cd.css rel=preload>
  <link as=script href=/js/app.aa40921b.js rel=preload>
  <link as=script href=/js/chunk-vendors.90e4c57a.js rel=preload>
  <link href=/css/app.eca329cd.css rel=stylesheet>
</head>
<body>
<noscript><strong>We're sorry but vue3_demo doesn't work properly without JavaScript enabled. Please enable it to
  continue.</strong></noscript>
<div id=app></div>
<script src=/js/app.aa40921b.js></script>
<script src=/js/chunk-vendors.90e4c57a.js></script>
</body>
</html>
@zlab
Copy link
Author

zlab commented Jul 29, 2018

@yyx990803 3.0.0-rc.5没有问题

@zlab zlab changed the title vue-cli-service build js和css顺序反了 vue-cli-service build js和css加载顺序反了 Jul 29, 2018
@zlab
Copy link
Author

zlab commented Jul 29, 2018

看看是不是这个引起的chunksSortMode: 'dependency'

@zlab
Copy link
Author

zlab commented Jul 29, 2018

#1669

就是这个问题，加了下面这个配置就好了

chainConfig.plugin('html').tap(args => {
      args[0].chunksSortMode = 'dependency';
      return args;
    });

@yyx990803
Copy link
Member

webpack 4 无所谓加载顺序。

@zlab
Copy link
Author

zlab commented Jul 29, 2018 •
edited
Loading

@yyx990803
js加载确实不受顺序影响
但是app.css 在 chunk-vendors.css 前面，导致我的css无法覆盖ui框架的css

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
  <link href="./app.f037bd48.css" rel="stylesheet">
  <link href="./chunk-vendors.b672498c.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./js/app.af44dc52.js"></script>
<script type="text/javascript" src="./js/chunk-vendors.019f858f.js"></script>
</body>
</html>

@yyx990803
Copy link
Member

Fixed in 352d3bb

@PanJiaChen
Copy link
Contributor

@yyx990803

In fact, the loading order of css is still has problem.

html-webpack-plugin@next has solved this problem. In the issue, the author said that it is not ready to be fixed in the @3.x version. Is it considered to use the @next version directly?

@PanJiaChen PanJiaChen mentioned this issue Jul 31, 2018
Closed
@yyx990803
Copy link
Member

@PanJiaChen do you have a reproduction showing the problem post-fix?

@PanJiaChen
Copy link
Contributor

@yyx990803 repo: https://github.com/PanJiaChen/chunksSortMode-test

When I add runtimeChunk, the order is wrong.

@yyx990803
Copy link
Member

@PanJiaChen should be addressed in 495c25a ... if you don't have cyclic deps it uses the original dep sort now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@yyx990803 @zlab @PanJiaChen