If chunksSortMode is set to manual, the order of the script after construction is not the order defined by the chunks.
zhenzhenChange opened this issue · 2 comments
zhenzhenChange commented
If chunksSortMode
is set to manual
, the order of the script
after construction is not the order defined by the chunks
.
styles
is css
, which can be ignored here.
Current behaviour 💣
webpack.config.js
// @ts-check
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
/** @type {import("webpack").Configuration} */
module.exports = {
plugins: [
new HtmlWebpackPlugin({
inject: 'body',
filename: 'index.html',
template: path.join(__dirname, 'src/index.html'),
scriptLoading: 'defer',
chunks: ['styles', 'polyfills', 'runtime', 'angular', 'ng-zorro-antd', 'main'],
chunksSortMode: 'manual',
}),
],
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
ng: {
name: 'angular',
test: /[\\/]node_modules[\\/]@angular[\\/]/,
},
nz: {
name: 'ng-zorro-antd',
test: /[\\/]node_modules[\\/]ng-zorro-antd[\\/]/,
},
},
},
},
}
build output index.html
<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
<meta charset="utf-8" />
<title>App</title>
<base href="/" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="pragma" content="no-cache" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link href="styles.e0840ca0b72b0e9b.css" rel="stylesheet" />
</head>
<body class="mat-typography">
<app-root></app-root>
<script defer="defer" src="runtime.9f40bbd43cd5d32e.js"></script>
<script defer="defer" src="polyfills.a4a65b6685f745c4.js"></script>
<script defer="defer" src="ng-zorro-antd.5eaca865d243e40b.js"></script>
<script defer="defer" src="angular.67b16a43f5f5895e.js"></script>
<script defer="defer" src="main.3727269706d3442a.js"></script>
</body>
</html>
Expected behaviour ☀️
<script defer="defer" src="polyfills.a4a65b6685f745c4.js"></script>
<script defer="defer" src="runtime.9f40bbd43cd5d32e.js"></script>
<script defer="defer" src="angular.67b16a43f5f5895e.js"></script>
<script defer="defer" src="ng-zorro-antd.5eaca865d243e40b.js"></script>
<script defer="defer" src="main.3727269706d3442a.js"></script>
Reproduction Example 👾
I'm sorry I can't offer a reproduction at short notice, any thoughts on where the problem is to be roughly identified?
Environment 🖥
{
"dependencies": {
"@angular/animations": "^15.0.4",
"@angular/common": "^15.0.4",
"@angular/core": "^15.0.4",
"@angular/forms": "^15.0.4",
"@angular/platform-browser": "^15.0.4",
"@angular/platform-browser-dynamic": "^15.0.4",
"@angular/router": "^15.0.4",
"@ant-design/icons-angular": "^15.0.0",
"core-js": "^3.27.1",
"date-fns": "^2.29.3",
"echarts": "^5.4.1",
"ng-zorro-antd": "^15.0.0",
"ngx-echarts": "^15.0.1",
"rxjs": "^7.8.0",
"zone.js": "^0.11.8"
},
"devDependencies": {
"@angular-builders/custom-webpack": "^15.0.0",
"@angular-devkit/build-angular": "^15.0.4",
"@angular/cli": "^15.0.4",
"@angular/compiler": "^15.0.4",
"@angular/compiler-cli": "^15.0.4",
"@angular/language-service": "^15.0.4",
"html-webpack-plugin": "^5.5.0",
"tslib": "~2.4.1",
"typescript": "~4.8.4",
"webpack": "^5.75.0",
"webpack-bundle-analyzer": "^4.8.0"
}
}
childrentime commented
can not repeat it.
alexander-akait commented
You can't put polyfills
or styles
before runtime
, because it is runtime code and using this code you load other chunks, it is a limitation, feel free to feedback, other chunks can be depended on other chunks too
Anyway feel free to feedback