使用Lazy Load模块+共享模块进行Angular 4 + AOT编译

Question

我试图在我的项目中使用AOT编译，我有7个延迟加载的模块。 AOT编译似乎工作（我的应用程序更快），但我的应用程序的大小比没有AOT编译大1 Mo。当我使用bundle analyzer插件查看发生了什么时，似乎导入了我的共享模块的所有地方（也就是说，几乎在我所有的延迟加载的模块中），它被重新导入，所以有一个共享模块的副本我的每一块！

有人有解决方法吗？

我的共享模块中没有任何提供程序。为了使AOT与延迟加载一起工作，我不得不将此配置用于webpack：

module.exports = function(env) {
  return webpackMerge({
    plugins: [
    new AotPlugin({
      tsConfigPath: 'tsconfig-aot.json',
      entryModule: helpers.root('src/app/app.module#AppModule')
    }),
    ]
  }, commonConfig, {
    devtool: 'source-map',

    output: {
      path: helpers.root('export/dist'),
      publicPath: '/',
      filename: '[name].[hash].js',
      chunkFilename: '[id].[hash].chunk.js'
    },

    module: {
      rules: [
      {
        test: /\.ts$/,
        use: ['@ngtools/webpack']
      }
      ]
    },

    plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
      compress: { warnings: false },
      mangle: {
        keep_fnames: true
      }
    }),
    new webpack.LoaderOptionsPlugin({
      htmlLoader: {
        minimize: false // workaround for ng2
      }
    }),
    new ExtractTextPlugin('[name].[hash].css'),
    new BundleAnalyzerPlugin()
    ]
  });
};

和普通配置：

module.exports = {
  entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/main.ts',
  },

  resolve: {
    extensions: ['.js', '.ts', '.scss']
  },

  module: {
    rules: [
    {
      test: /\.html$/,
      use: 'html-loader?attrs=img:src div:inlineSVG'
    },
    {
      test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico|otf)$/,
      use: 'file-loader?name=assets/[name].[hash].[ext]'
    },
    {
      test: /\.scss$/,
      exclude: [helpers.root('src', 'app')],
      use: ExtractTextPlugin
      .extract({
        fallback: 'style-loader',
        use: [
        { loader: 'css-loader', query: { sourceMaps: true } },
        { loader: 'resolve-url-loader'},
        { loader: 'sass-loader'}
        ]
      })
    },
    {
      test: /\.scss$/,
      include: [helpers.root('src', 'app')],
      use: [
      { loader: 'raw-loader'},
      { loader: 'resolve-url-loader'},
      { loader: 'sass-loader'}
      ]
    }
    ]
  },
  plugins: [
  // Workaround for angular/angular#11580
  new webpack.ContextReplacementPlugin(
    /angular(\\|\/)core(\\|\/)@angular/,
    helpers.root('src'), // location of your src
    {
      // your Angular Async Route paths relative to this root directory
    }
    ),
  new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en|fr/),
  new webpack.DefinePlugin({
    'CONFIG_STORAGE_NAME' : JSON.stringify(CONFIG_STORAGE_NAME),
    'process.env': {
      'CONFIG_STORAGE_NAME' : JSON.stringify(CONFIG_STORAGE_NAME)
    }
  }),
  new webpack.optimize.CommonsChunkPlugin({
    names: ['app', 'vendor', 'polyfills']
  }),
  new HtmlWebpackPlugin({
    template: helpers.root('src', 'index.html')
  })
  ]
};