使用Webpack 4（SplitChunksPlugin）拆分Angular时，互联网上似乎存在很大的真空。
我已经在搜索“代码拆分角度Webpack”的第一页和第二页上阅读了几乎所有资源，其中包括有关React的教程。但是，由于存在许多相互矛盾的方法，因此我无法把握要点。
我有一个像这样的应用程序结构：
app/
modules/
...
...
name/
- name.component.ts
- name.component.html
- name.module.ts
- name.service.ts
app.module.ts
app-routing.module.ts
main.ts
app.component.ts
app.js
webpack.config.js
我已经延迟加载了所有模块。 现在，我想对模块本身（组件及其依赖项等）进行代码拆分。
让我感到困惑的是“如何动态加载这些依赖项？”
我正在使用HtmlWebpackPlugin将生成的javascript动态添加到index.html文件中。
Index.html：
<body>
<!-- outlet! -->
<my-app></my-app>
</body>
在HtmlWebpackPlugin生成javascript文件之后：
<body>
<!-- outlet! -->
<my-app></my-app>
<script type="text/javascript" src="/dist/main.bundle.js?7e402ab94c22169960b7"></script>
<script type="text/javascript" src="/dist/vendor.bundle.js?7e402ab94c22169960b7"></script>
</body>
main.bundle.js是我的项目代码，而vendor.bundle.js是node_modules等。
但是，这是一个很大的项目，初始页面加载量约为23mb（是， 23 ...），这就是为什么我需要对此代码进行拆分的原因项目。
我的第一个问题是：由于所有内容（供应商和主捆绑包）已经加载到index.html（包含我的路由器插座的中） 。如何从组件中代码拆分依赖项？ 无论如何，它们都将最终出现在Index.html中，因为..那是路由器出口所在的地方？因此，使用当前方法将js代码划分为多少块都没关系。
webpack.config.js：
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const sourcePath = path.join(__dirname, './public');
const destPath = path.join(__dirname, './public/dist');
const nodeModulesPath = path.join(__dirname, './node_modules');
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = function (env) {
const nodeEnv = env && env.prod ? 'production' : 'development';
const isProd = nodeEnv === 'production';
const plugins = [
new webpack.EnvironmentPlugin({
NODE_ENV: nodeEnv,
}),
// new BundleAnalyzerPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.IgnorePlugin(/\.\/locale$/),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
}),
new HtmlWebpackPlugin({
hash: true,
template: sourcePath + '/index.html',
filename: sourcePath + '/dist/index.html'
})
];
if (isProd) {
plugins.push(
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
screw_ie8: true,
conditionals: true,
unused: true,
comparisons: true,
sequences: true,
dead_code: true,
evaluate: true,
if_return: true,
join_vars: true,
},
output: {
comments: false,
},
})
);
}
return {
mode: 'development',
devtool: isProd ? 'source-map' : 'eval',
context: nodeModulesPath,
entry: {
main: sourcePath + '/main.ts',
vendor: [
'bootstrap/dist/css/bootstrap.min.css',
'bootstrap/dist/js/bootstrap.min.js',
'moment/min/moment-with-locales.js',
'js-cookie/src/js.cookie.js',
'lodash/lodash.js',
'font-awesome/css/font-awesome.css',
'@fortawesome/fontawesome-free/css/all.css',
'admin-lte/dist/css/AdminLTE.css',
'admin-lte/dist/css/skins/skin-blue.css'
]
},
optimization: {
splitChunks: {
chunks: 'async',
minSize: 30000,
maxSize: 0,
minChunks: 2,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: 10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
},
output: {
path: destPath,
filename: '[name].bundle.js',
chunkFilename: '[name]-chunk.js',
publicPath: '/dist/'
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: [{
loader: 'ts-loader',
options: {
transpileOnly: true // https://github.com/TypeStrong/ts-loader#faster-builds
}
}
],
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|gif|jpg|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000'
},
{
test: require.resolve('jquery'),
use: [
{ loader: 'expose-loader', options: 'jQuery' },
{ loader: 'expose-loader', options: '$' }
]
}
],
},
resolve: {
extensions: ['.js', '.ts'],
modules: [
path.resolve(__dirname, 'node_modules'),
],
alias: {
}
},
plugins: plugins,
performance: isProd && {
maxAssetSize: 100,
maxEntrypointSize: 300,
hints: 'warning',
},
stats: {
warnings: false,
colors: {
green: '\u001b[32m',
}
}
};
};
我基本上想拆分 EACH 模块的所有依赖项（即我上面称为name的组件文件夹）。我将如何完成？ （或者...我有什么选择？）
数据和工作流程的过程
1. User opens website. Default dependencies are loaded.
2. User navigates to /dashboard
3. Resources (node_modules & other dependencies) for /dashboard is loaded
从GIF摘录的这个this react article很好地说明了这一点（为该模块加载块相关性）。
