我们使用 Angular 6.0.3 构建了一个仪表板,它是使用 Angular CLI 构建的。
我们正在尝试使用 @angular/elements 创建独立的 Web 组件,这些组件也可以作为小部件重用。这些 web 组件正在加载到 DOM 中并且都正常工作。
问题是这些小部件的捆绑包非常大 - 它们使用与仪表板相同的 Angular 版本,因此我们的小部件可以重用这些已加载的部分。
问题:这甚至可能吗?我们可以在完全独立的 web pack 包之间共享 @angular/core 吗?
我们已经尝试使用Angular Webpack Externals,它大大减少了包的大小(显然),但是所有的 Angular 引用都失败了
const NgCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
output: {
path: __dirname + '/build',
filename: 'infpnl_widget.js'
},
module: {
rules: [
{
test: /\.ts$/,
loader: '@ngtools/webpack'
}
]
},
resolve: {
extensions: [
'.ts',
'.js'
]
},
externals: [
function (context, request, callback) {
if (request.startsWith('@angular/')) {
return callback(null, {
root: ['ng', camelCase(request.replace(/^@angular\//, ''))],
commonjs: request,
commonjs2: request,
amd: request
});
}
callback();
}
],
plugins: [
new NgCompilerPlugin({
tsConfigPath: './tsconfig.json',
mainPath: './src/index.ts',
skipCodeGeneration: true
}),
new UglifyJsPlugin(),
new CompressionPlugin()
],
mode: 'production',
stats: 'errors-only'
};