小编Emi*_*ous的帖子

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

我试图在我的项目中使用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
      }
    }), …
Run Code Online (Sandbox Code Playgroud)

lazy-loading aot webpack angular2-aot angular

6
推荐指数
0
解决办法
747
查看次数

标签 统计

angular ×1

angular2-aot ×1

aot ×1

lazy-loading ×1

webpack ×1