将Angular6中的main.js拆分为多个文件 [英] Split main.js in Angular6 into multiple files
本文介绍了将Angular6中的main.js拆分为多个文件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用的是角度6,一旦我构建main.js大约是8MB,当我们构建这个应用程序时,我希望它会变得更大。有没有办法将此文件拆分成多个文件,以便它们加载得更快?是否有办法在需要时实现延迟加载。
chunk {0} runtime.ec2944dd8b20ec099bf3.js (runtime) 1.44 kB [entry] [rendered]
chunk {1} main.d2ed080a489df2acb65c.js (main) 8.27 MB [initial] [rendered]
chunk {2} polyfills.991eda935898a57f5c1f.js (polyfills) 59.6 kB [initial] [rendered]
chunk {3} styles.5bc2644258354e9b9ba3.css (styles) 680 kB [initial] [rendered]
chunk {scripts} scripts.92795880e21717c67f9d.js (scripts) 40.3 kB [rendered]
angular.json
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
},
推荐答案
首先,强烈建议您更新角度版本。
是的,您可以将main.js
拆分成几个块,但我认为延迟加载是提高应用程序速度所需要的。
角CLI拆分块步骤
从docs:使用Angular CLI
选项可以拆分common
和vendor
块。
您可以将这些设置添加到项目的angular.json
或直接使用:
ng build --commonChunk --vendorChunk
但我认为这些选项在ANGLING V6中是不可用的。
无论如何,您都可以使用自定义构建器(见下文)做同样的事情。
自定义拆分块步骤
修改angular.json中的builder,将路径添加到webpack.config.js,使用webpack自定义配置进行构建和服务:
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./webpack.config.js"
},
...
"serve": {
"builder": "@angular-builders/custom-webpack:dev-server",
在webpack.config.js
中,webpack能做的事你都可以做。以下是shared
块的示例:
module.exports = function(base) {
return {
...base,
optimization: {
...base.optimization,
splitChunks: {
...base.optimization.splitChunks,
cacheGroups: {
...base.optimization.splitChunks.cacheGroups,
myCustomChunk: {
test: /MyCustomRegexpToGrabFiles/, // search files by pattern
enforce: true, // always split this chunk
name: 'myCustomChunk', // name will be myCustomChunk.js
chunks: 'all' // split it from lazy and common chunks
}
}
}
}
}
}
有关更多示例,请查看SplitChunksPlugindocs。
延迟加载步骤
webpack的惰性加载总是会产生单独的块。
基本上,对于角度V6,您只需遵循此guide。
这篇关于将Angular6中的main.js拆分为多个文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文