相关疑难解决方法(0)

在我的示例Angular 2 SPA中,我使用了Webpack 2

1. 捆绑我所有的js文件
2. 实现"Tree Shaking"以删除死代码并减少bundle js文件大小
3. 并实现Ahead-of-time编译以进一步减少bundle js文件的大小.

通过创建webpack.config.js文件,我能够获得"1"和"2",以下是此文件的内容

'use strict';
const webpack = require('webpack');

module.exports = {
    devtool: 'source-map',
    entry: './src/main.js',       
    plugins: [

    new webpack.optimize.UglifyJsPlugin({
        minimize: true,
        compress: false
    })
    ],
    output: {
        filename:'./src/bundle.js'
    }
}

"webpack.optimize.UglifyJsPlugin"插件执行Tree Shaking和minfication,将我的bundle.js文件大小从3 mb减少到1 mb.

接下来为了实现AoT编译,我使用了@ ngtools/webpack,以下是带有AoT相关代码的修改过的webpack.config.js文件.

'use strict';
const webpack = require('webpack');
const AotPlugin = require('@ngtools/webpack').AotPlugin;

module.exports = {
    devtool: 'source-map',
    entry: './src/main.js',
    module: {
        rules: [
            {
                test: /\.ts$/,
                loader: '@ngtools/webpack'
            }
        ]
    },
    plugins: [

    new webpack.optimize.UglifyJsPlugin({ …

我一直在试图让AOT使用我的Webpack应用程序.(@ ngtools /的WebPack)

任何人都可以帮助我吗？

它似乎工作,但compiler.js仍然包含在捆绑包中.此外,它仍然在寻找我所有的.html文件,并在所有组件模板上获得404.

所以据我所知,它并没有真正做到AOT最好的部分？

在这里任何光线都可以闪耀,我被卡住!

谢谢!!