'2017/02'에 해당되는 글 2건

  1. 2017.02.16 Webpack으로 하는 Angular2 Lazy loading
  2. 2017.02.15 @ionic/app-scripts
HTML52017.02.16 14:47


https://medium.com/@daviddentoom/angular-2-lazy-loading-with-webpack-d25fe71c29c1#.ik88lsre3



Home과 About페이지를 갖는 앱이 있다고 하자 대부분의 유저는 About페이지를 거의 열어보지 않을것이다. 자 이게 lazy loading이 필요한 이유이다. About페이지는 미리 로딩할 필요가 없는 것이다.


프로젝트 설정


/app

 app.component.ts

 app.component.html

 app.module.ts

 app.routing.ts

 /home

    home.component.ts

    home.component.html

    home.module.ts

    home.routing.ts  

  /+about --> Lazy loaded module

    about.component.ts

    about.component.html

    about.module.ts

    about.routing.ts



1. 로더 설치


angular2-router-loader를 사용해야 한다. 아래 명령으로 설치한다.


npm install angular2-router-loader--save-dev


이번엔 webpack 설정파일에 로더를 추가한다.


webpack.config.js


loaders: [

  {

    test: /\.ts$/,

    loaders: [

      ‘awesome-typescript-loader’, 

      ‘angular2-template-loader’, 

      ‘angular2-router-loader’]

   },

   ...

]


2. 상위 콤포넌트에 라우팅설정을 추가한다.


보통 라우팅 설정을 자기자신의 모듈내에서 정의한다. lazy loading되는 모듈은 상위콤포넌트 즉 호출하는 모듈에서 설정해주어야 한다.


app.routing.ts

const routes: Routes = [
 { path: '', redirectTo: '/home', pathMatch: 'full',
 { path: 'about', loadChildren: './+about/about.module#AboutModule' }
];


"about" 라우트하나를 설정하고 angular에게 "about"라우트로 페이지를 로드할 수 있도록 알려준다. #AboutModule은 모듈명으로 참조되고 +를 앞에 붙이는 것은 lazy load될거라는 규약이다.


3. Lazy Module 작성


lazy module은 none lazy module과 거의 동일하게 동작한다. 한가지 큰 차이점이 있는데 상위모듈에서 about(/about)경로를 선언했기 때문에 경로를 다시 정의할 필요가 없다. 우리가 해야 하는것은 로드되어야 할 디폴트 콤포넌트를 설정해주는 것이다.


./+about/about.routing.ts

const routes: Routes = [

 { path: '', component: AboutComponent },

];


됐다.

앱을 실행하고 about페이지로 이동하면 새로운 chunk가 로드되는것을 볼수 있을 것이다.



The source code can be found here

신고
Posted by 삼스
HTML52017.02.15 16:06


Ionic Project를 위한 스크립트


설치는 이렇게


npm install @ionic/app-scripts@latest --save-dev


디폴트 설정


아래와 같은 기본설정으로 빠르게 앱을 빌드하게 해준다.

  • Multi-core processing tasks in parallel for faster builds
  • In-memory file transpiling and bundling
  • Transpiling source code to ES5 JavaScript
  • Ahead of Time (AoT) template compiling
  • Just in Time (JiT) template compiling
  • Template inlining for JiT builds
  • Bundling modules for faster runtime execution
  • Treeshaking unused components and dead-code removal
  • Generating CSS from bundled component Sass files
  • Autoprefixing vendor CSS prefixes
  • Minifying JavaScript files
  • Compressing CSS files
  • Copying src static assets to www
  • Linting source files
  • Watching source files for live-reloading
기본설정을 통해 개발에 집중할 수 있게 해준다.

Ionic framework의 소스는 모듈로 구성되어 있고 다양한 번들러와 빌드프로세스로 패키징될 수 있다. 이 프로젝트의 목적은 ionic app을 더 쉽게 개발하게 하기 위한것이다. 

npm Scripts

외부 테스트러너에 의존하기보다 Ionic App Script는 npm script로 실행되는데 적합하다. package.json파일에 아래와 같이 기본설정이 되어 있다.

"scripts": {
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },

package.json에 기술된 build script를 실행되도록 하려면 다음과 같이 수행한다.

npm run build

Custom Configuration

개발자에게 대게는 기본설정으로 충분할것이다. 하지만 Ionic App Script는 다양한 테스크들을 설정하거나 오버라이드하는 다양한 방법을 제공한다.  Custom하지 않으면 항상 디폴트가 적용된다.

package.json Config

package.json파일을 Ionic project가 사용하는데 config 프로퍼티가 커스텀 설정을 위해 사용된다. 아래는 그 예이다.

  "config": {
    "ionic_bundler": "rollup",
    "ionic_source_map_type": "source-map",
    "ionic_cleancss": "./config/cleancss.config.js"
  },

Command-line Flags

기억해야 해! 프로젝트의 package.json파일의 scripts프로퍼티에서 ionic-app-scripts를 어떻게 실행했는지. 자 우리는 이제 각 스크립트에 command-line flag들을 추가할 수 있다. 또는 새로운 스크립트를 커스텀플래그와 함께 정의할 수 도 있지.

"scripts": {
    "build": "ionic-app-scripts build --rollup ./config/rollup.config.js",
    "minify": "ionic-app-scripts minify --cleancss ./config/cleancss.config.js",
  },

동일한 커맨드라인 플래그는 npm run에도 동일하게 적용될 수 있지

npm run build --rollup ./config/rollup.config.js

Overriding Config Files

config filepackage.json configcmd-line flag
Babiliionic_exp_babili--babili
CleanCssionic_cleancss--cleancss or -e
Copyionic_copy--copy or -y
Closureionic_closure--closure or -l
Generatorionic_generator--generator or -g
NGCionic_ngc--ngc or -n
Rollupionic_rollup--rollup or -r
Sassionic_sass--sass or -s
TSLintionic_tslint--tslint or -i
UglifyJSionic_uglifyjs--uglifyjs or -u
Watchionic_watch--watch
Webpackionic_webpack--webpack or -w

Overriding Config Values


config valuespackage.json configcmd-line flagdefaultsdetails
root directoryionic_root_dir--rootDirprocess.cwd()The directory path of the Ionic app
src directoryionic_src_dir--srcDirsrcThe directory holding the Ionic src code
www directoryionic_www_dir--wwwDirwwwThe deployable directory containing everything needed to run the app
build directoryionic_build_dir--buildDirbuildThe build process uses this directory to store generated files, etc
temp directoryionic_tmp_dir--tmpDir.tmpTemporary directory for writing files for debugging and various build tasks
node_modules directoryionic_node_modules_dir--nodeModulesDirnode_modulesNode modules directory
ionic-angular directoryionic_angular_dir--ionicAngularDirionic-angularionic-angular directory
ionic-angular entry pointionic_angular_entry_point--ionicAngularEntryPointindex.jsentry point file for ionic-angular
bundlerionic_bundler--bundlerwebpackChooses which bundler to use: webpack or rollup
source map typeionic_source_map_type--sourceMapTypesource-mapChooses the webpack devtool option. eval and source-map are supported
generate source mapionic_generate_source_map--generateSourceMaptrueDetermines whether to generate a source map or not
tsconfig pathionic_ts_config--tsconfig{{rootDir}}/tsconfig.jsonabsolute path to tsconfig.json
app entry pointionic_app_entry_point--appEntryPoint{{srcDir}}/app/main.tsabsolute path to app's entrypoint bootstrap file
app ng module pathionic_app_ng_module_path--appNgModulePath{{srcDir}}/app/app.module.tsabsolute path to app's primary NgModule
app ng module classionic_app_ng_module_class--appNgModuleClassAppModuleExported class name for app's primary NgModule
clean before copyionic_clean_before_copy--cleanBeforeCopyfalseclean out existing files before copy task runs
output js fileionic_output_js_file_name--outputJsFileNamemain.jsname of js file generated in buildDir
output js map fileionic_output_js_map_file_name--outputJsMapFileNamemain.js.mapname of js source map file generated in buildDir
output css fileionic_output_css_file_name--outputCssFileNamemain.cssname of css file generated in buildDir
output css map fileionic_output_css_map_file_name--outputCssMapFileNamemain.css.mapname of css source map file generated in buildDir
bail on lint errorionic_bail_on_lint_error--bailOnLintErrornullSet to true to make stand-alone lint commands fail with non-zero status code
write AoT files to diskionic_aot_write_to_disk--aotWriteToDisknullSet to true to write files to disk for debugging
print dependency treeionic_print_original_dependency_tree--printOriginalDependencyTreenullSet to true to print out the original dependency tree calculated during the optimize step
print modified dependency treeionic_print_modified_dependency_tree--printModifiedDependencyTreenullSet to true to print out the modified dependency tree after purging unused modules
print webpack dependency treeionic_print_webpack_dependency_tree--printWebpackDependencyTreenullSet to true to print out a dependency tree after running Webpack
experimental parse deeplink configionic_experimental_parse_deeplinks--experimentalParseDeepLinksnullSet to true to parse the Ionic 3.x deep links API for lazy loading (Experimental)
experimental manual tree shakingionic_experimental_manual_treeshaking--experimentalManualTreeshakingnullSet to true to purge unused Ionic components/code (Experimental)
experimental purge decoratorsionic_experimental_purge_decorators--experimentalPurgeDecoratorsnullSet to true to purge unneeded decorators to improve tree shakeability of code (Experimental)
experimental closure compilerionic_use_experimental_closure--useExperimentalClosurenullSet to true to use closure compiler to minify the final bundle
experimental babiliionic_use_experimental_babili--useExperimentalBabilinullSet to true to use babili to minify es2015 code
convert bundle to ES5ionic_build_to_es5--buildToEs5trueConvert bundle to ES5 for for production deployments


신고
Posted by 삼스

티스토리 툴바