moment-timezone 최적화

devDependencies에 moment-timezone-data-webpack-plugin 추가.

npm install --save-dev moment-timezone-data-webpack-plugin
// or
yarn add --dev moment-timezone-data-webpack-plugin

Moment Timezone | Docs

next.config.js 에 해당 코드 추가

const webpack = require('webpack');
const MomentTimezoneDataPlugin = require('moment-timezone-data-webpack-plugin');

module.exports = {
	webpack(config) {

	    // moment 번들링 최적화
	    // moment 언어팩에서 사용 할 언어팩만 번들링 한다.
	    config.plugins.push(new webpack.ContextReplacementPlugin(/moment[/\\\\]locale$/, /^\\.\\/(ko|en)$/));
	
	    // moment-timezone 번들링 최적화
			// 사용할 타임존 및 시간대만 번들링 한다.
	    config.plugins.push(
	      new MomentTimezoneDataPlugin({
	        matchZones: ['Asia/Seoul'], // 사용할 타임존
	        startYear: new Date().getFullYear() - 10, // 현재로부터 10년 전부터 데이터 사용
	        endYear: new Date().getFullYear() + 10, // 현재로부터 10년 후까지 데이터 사용
	      }),
	    );
	
	    return config;
	  },
}

이미지 최적화

Next/Image를 활용한 이미지 최적화 | 카카오엔터테인먼트 FE 기술블로그

NEXT.JS의 이미지 최적화는 어떻게 동작하는가? | 올리브영 테크블로그

• ‘default’ loader를 사용하는 경우 svg, gif는 최적화 하지 않는다.

SEO

next-sitemap

next-seo

HTML 페이로드 줄이기