Я создал простое приложение Hello world с помощью Angular 4 (4.3.0).
Angular файлы:
- app.component.ts
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
myTitle:string;
constructor() {
this.myTitle = `Hello world`;
}
}
- app.component.html
<h1>
{{myTitle}}
</h1>
- app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
TypeScript файл
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"module": "es6",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"include": [
"./**/*"
],
"lib": [
"es2016",
"dom"
]
} ,
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
Файл Webpack
Вот полный файл, но важными частями являются:
config.module.rules.push(
{ test: /\.ts$/, loaders: ['@ngtools/webpack'] }
);
И
if (envOptions.MODE === 'prod') {
config.module.rules.push(
{ test: /\.ts$/, loaders: ['@ngtools/webpack'] }
);
config.plugins = [
new AotPlugin({
tsConfigPath: './tsconfig.json',
entryModule: __dirname + '/src/app/app.module#AppModule'
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: false,
beautify: false,
mangle: {
screw_ie8: true,
keep_fnames: true
},
compress: {
warnings: false,
screw_ie8: true
},
comments: false
}),
];
}
Диагностика
Оптимизация. Когда я запускаю >webpack
(без webpack --env.MODE=prod
) в cmd, я получаю следующее:
Теперь посмотрим, что существует компилятор:
Теперь давайте запустим >webpack --env.MODE=prod
, и я вижу файлы меньшего размера:
Также - источник-исследователь DOES показывает, что компилятор ушел:
Вопрос
Это минимальный размер, который я могу получить для приложения Hello world? Я читал, что uglifyjs также трясет дерево.
Как я могу свести к минимуму выходные файлы? 250K по-прежнему выглядит огромным для такой простой задачи.
Обновление
Добавление плагина GZIP с использованием этой конфигурации:
new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.8
})
Размер составляет 60 тыс. приложений + 20 тыс. polyfill= 80 тыс. ок.
Но я читал, что простой мир привет должен взять около 20 тыс. так?