fix($core): no dynamic import style

[shigma]

Summary

VuePress will create an empty chunk every time.

repro: https://github.com/Shigma/vuepress-generates-empty-chunk

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Code style update
• Refactor
• Docs
• Build-related changes
• Other, please describe:

If changing the UI of default theme, please provide the before/after screenshot:

Does this PR introduce a breaking change? (check one)

• Yes
• No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

• When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)

You have tested in the following browsers: (Providing a detailed version will be better.)

• Chrome
• Firefox
• Safari
• Edge
• IE

If adding a new feature, the PR's description includes:

• A convincing reason for adding this feature
• Related documents have been updated
• Related tests have been updated

To avoid wasting your time, it's best to open a feature request issue first and wait for approval before working on it.

Other information:

[timaschew]

What do you mean with empty chunk? I don't see empty chunks in https://github.com/Shigma/vuepress-generates-empty-chunk/tree/master/.vuepress/dist
Or do you expect to have an empty chunk with this change?

[shigma]

@timaschew This is an empty chunk:

https://github.com/Shigma/vuepress-generates-empty-chunk/blob/c8e2bf746ac851aa87f191820e8c521590b7bb26/.vuepress/dist/assets/js/5.e8bcff97.js#L1

[ulivz]

Good job, and could you help confirm following 2 things:

1. Whether the generated CSS styles satisfies the following sequence - ref:
   • Theme's styles
   • User's styles
2. The underlying causes of generating this empty chunk.

[shigma]

@ulivz

1. I have tested the overriding behavior by using the following test codes:

vuepress/packages/docs/docs/.vuepress/styles/index.styl

Lines 3 to 5 in a973960

	//.content {
	// font-size 30px;
	//}

vuepress/packages/docs/docs/.vuepress/styles/palette.styl

Line 3 in a973960

//$accentColor = #f00

And it works as expected.

2. Dynamic imports is a part of code splitting.

[shigma]

@ulivz Can you look into this PR one more time?

[flozero]

hello @shigma i know it's been a while. But can you tell me more about your PR. What about the empty chunks stuff.

I think about the generation of them. It's look great but i am not sure to understand

[Mister-Hope]

Can we have this PR merged? I think it is using the improt function which the webpack provides now, and he is changing it to es module syntax. So it will fix the empty chunk issue. @f3ltron

[shigma]

@f3ltron

import() will be interpretted as dynamic import, which means the file it imports should be emitted in a separate file.

[Mister-Hope]

@newsbielt703 @meteorlxy Could you check and merge this PR. Quite a long time since Shigma opened it.

[billyyyyy3320]

LGTM! One more approval and it will be merged.

[shigma]

Glad to see this merged. Thanks!