성능 향상을 위해 로컬에서 Microsoft-Webchat 구축

Microsoft Bot 프레임워크는 봇 생성에 사용되는 인기 있는 프레임워크입니다. 웹 및 모바일 사용자를 위한 사용자 인터페이스로 사용할 수 있는 웹채팅 인터페이스를 제공합니다.
그것은 반응으로 개발되었으며 웹 페이지에서 직접 사용할 수 있는 패키지와 함께 제공됩니다. 그러나 실제 사용자 정의를 수행하려면 반응 응용 프로그램에서 사용해야 합니다.
이로 인해 배포된 애플리케이션의 패키지 크기가 평소보다 커집니다. 더 나은 성능을 원하는 경우 문제가 될 수 있습니다.

이 블로그에서는 로컬에서 웹 채팅을 빌드하고 일부 수정을 수행하여 더 나은 성능을 제공할 수 있는 방법을 보여 드리겠습니다.

가정

웹 채팅 음성이 필요하지 않아서 패키지를 더 작게 만들기 위해 제거했습니다

.

사용자 정의 웹 채팅 응용 프로그램에 대해 next js를 사용하고 있습니다

.

먼저 우리는 기본 설정으로 볼 것입니다

반응 설정으로 웹 채팅을 실행하려면 botframework-webchat을 설치해야 합니다.

npm install botframework-webchat

//import as a dynamic module so this will load only when it is needed
const ReactWebChat = dynamic(
    () => {
        return import('botframework-webchat');
    },
    { ssr: false }
);

//the directline
 let directLine = useMemo(() => createDirectLine({
        secret: 'Mytoken',
        domain: 'http://directline endpoint',
        webSocket: true,
        conversationId: 'conversationId',
        pollingInterval: 2000
    }), []);
//redux store
let store=useMemo(() => createStore({}, ({ dispatch }) => next => action => {
     if (action.type === 'DIRECT_LINE/POST_ACTIVITY') {
         //your code here
     }
}), []);
<ReactWebChat directLine={directLine}
                    userID={userId}
                    username={userName}
                    locale='en-us'
                    sendTypingIndicator={true}
                    resize="detect"
                    bot={bot}
                    styleOptions={styleOptionsState}
                    store={store}
                />

With this setup we can run the chat app,for details you can check an example from Microsoft-Webchat 

다음 구성

개발 종속성 설치

@next/bundle-analyzer - 번들을 분석하는 데 사용합니다

.

duplicate-package-checker-webpack-plugin - 중복 패키지를 찾는 데 사용합니다

.

next-transpile-modules - IE11 지원용 트랜스파일 모듈

교차 환경 - Windows에서 사용

앱 분석

패키지 풋프린트를 분석하기 위해 package.json의 스크립트에서 다음을 사용합니다.

"analyse": "cross-env ANALYZE=true next build"

next.config 내부

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

const config={
     future: {
        webpack5: true,
     },
}

그런 다음 실행

npm run-script analyse

내 설정의 경우 이것이 내가 얻는 것입니다.





botframework-webchat-api/lib가 현지화를 위해 얼마나 많은 공간을 차지하는지 확인하세요.
또한 microsoft-cognitiveservices-speech-sdk 배포가 얼마나 큰지, 음성이 필요하지 않으면 음성도 제거할 수 있으므로 정리하겠습니다.

작게 만들자

botframework-webchat-api 최소화

먼저 botframework-webchat-api 폴더를 node_modules에서 로컬 디렉터리로 복사합니다

.

필요하지 않은 로케일 참조를 제거합니다

.

botframework-webchat-api\src\localization\getAllLocalizedStrings.ts에서 필요한 언어를 제외한 모든 언어를 제거합니다. 제 경우에는 en_US만 필요합니다.

// Strings commented out are pending official translations


import enUS from './en-US.json';

import bundledOverrides from './overrides.json';
import LocalizedStrings from '../types/LocalizedStrings';
import mergeLocalizedStrings from './mergeLocalizedStrings';

let localizedStrings;

function getAllLocalizedStrings(): { [language: string]: LocalizedStrings } {
  return (
    localizedStrings ||
    (localizedStrings = mergeLocalizedStrings(
      {
        'en-US': enUS,
      },
      bundledOverrides
    ))
  );
}

export default getAllLocalizedStrings;

그런 다음 botframework-webchat-api\src\localization\overrides.json에서 필요한 것을 유지하십시오. 제 경우에는 en_US입니다.

{
  "en-US": {
    "COGNITIVE_SERVICES_SPEECH_TO_TEXT": true,
    "COGNITIVE_SERVICES_TEXT_TO_SPEECH": "neural",
    "GLOBALIZE_LANGUAGE": "en",
    "SPEECH_LANGUAGE": "en-US"
  }
}

빌드

npm i
npm run-script build

Microsoft-cognitiveservices-speech-sdk 제거

node_modules에서 botframework-webchat 폴더 복사

webpack 구성에서 제거

react: resolve(__dirname, '../isomorphic-react/dist/react.js'),  
   react-dom': resolve(__dirname, '../isomorphic-react-dom/dist/react-dom.js')

package.json에서 제거

   "isomorphic-react": "4.13.0",  
    "isomorphic-react-dom": "4.13.0",  
    "microsoft-cognitiveservices-speech-sdk": "1.15.1",  
    "botframework-directlinespeech-sdk": "4.13.0",

src/index.ts에서
createCognitiveServicesSpeechServicesPonyfillFactory,createDirectLineSpeechAdapters에 대한 주석 참조

빌드

npm i
npm run-script build

botframework-webchat-api,botframework-webchat에서 node_modules 제거

다음 구성에서

config.resolve.alias['microsoft-cognitiveservices-speech-sdk/distrib/lib/src/common.browser/Exports']= resolve(
      __dirname,
      'node_modules/microsoft-cognitiveservices-speech-sdk/distrib/lib/src/common.browser/Exports.js'
    ),
    config.resolve.alias['microsoft-cognitiveservices-speech-sdk/distrib/lib/src/common.speech/Exports']= resolve(
      __dirname,
      'node_modules/microsoft-cognitiveservices-speech-sdk/distrib/lib/src/common.speech/Exports.js'
    ),
    config.resolve.alias['microsoft-cognitiveservices-speech-sdk/distrib/lib/src/common/Exports']= resolve(
      __dirname,
      'node_modules/microsoft-cognitiveservices-speech-sdk/distrib/lib/src/common/Exports.js'
    ),
    config.resolve.alias['microsoft-cognitiveservices-speech-sdk/distrib/lib/src/sdk/Audio/AudioStreamFormat']= resolve(
      __dirname,
      'node_modules/microsoft-cognitiveservices-speech-sdk/distrib/lib/src/sdk/Audio/AudioStreamFormat.js'
    ),
    config.resolve.alias['microsoft-cognitiveservices-speech-sdk/distrib/lib/src/sdk/Exports']= resolve(
      __dirname,
      'node_modules/microsoft-cognitiveservices-speech-sdk/distrib/lib/src/sdk/Exports.js'
    ),
    config.resolve.alias['microsoft-cognitiveservices-speech-sdk/distrib/lib/microsoft.cognitiveservices.speech.sdk']= resolve(
      __dirname,
      'node_modules/microsoft-cognitiveservices-speech-sdk/distrib/lib/microsoft.cognitiveservices.speech.sdk.js'
    ),

    // This line must be placed after other specific imports.
    config.resolve.alias['microsoft-cognitiveservices-speech-sdk']= resolve(
      __dirname,
      'node_modules/microsoft-cognitiveservices-speech-sdk/distrib/lib/microsoft.cognitiveservices.speech.sdk.js'
    ),

    config.resolve.alias['botframework-webchat-api'] = resolve(
      __dirname,
      'botframework-webchat-api'
    )

    config.resolve.alias['botframework-webchat'] = resolve(
      __dirname,
      'botframework-webchat'
    )

이제 다시 실행하자

npm run-script analyse

이것이 내가 얻는 것입니다.





그게 다야

우리는 패키지의 크기를 줄였습니다.

보너스

lodash 또는 moment에 대한 감소 패키지의 경우 다음을 사용할 수 있습니다.

다음 구성 내부의 순간

 config.plugins.push(new webpack.IgnorePlugin({
      resourceRegExp: /^\.\/locale$/,
      contextRegExp: /moment$/,
    }))

lodash의 경우 다음과 같은 코드에서 사용하십시오.

import cloneDeep from 'lodash/cloneDeep';
import isEmpty from 'lodash/isEmpty';

IE11용으로 트랜스파일하려면

const withTM = require('next-transpile-modules')(['react-markdown', 'react-markdown/node_modules/is-plain-obj',
 'postcss','sanitize-html','sanitize-html/node_modules/escape-string-regexp']);
let withAnalyzer = withBundleAnalyzer(config)
let final = withAnalyzer
if (!process.env.NODE_ENV || process.env.NODE_ENV === 'production') {
  final = withTM(withAnalyzer)
}

중복 패키지를 찾으려면

 const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin')
 config.plugins.push(new DuplicatePackageCheckerPlugin())

//  then you can use for duplicate packages,to pickup only from default path
 config.resolve.alias['core-js'] = resolve(
      __dirname,
      'node_modules',
      'core-js'
    )

적절한 소스 코드 사용으로 크롬 콘솔에서 오류를 보려면

config.optimization.minimize = false