React-router - Code Splitting _webpack Prodoction

ReactJS - Code Splitting _webpack Prodo

react-router v4 version4

sorce code는 이전 문서에서 재활용한다.

/...../ 는 생략되었다는 표시임

파란 글씨는 추가된 것임

빨간 글씨는 수정된 것임

webpack environment

~cra-router/config$ webpack.config.prod.js : entry

  entry: {

      vendor: [

          require.resolve('./polyfills'),

          'react',

          'react-dom',

          'react-router-dom',

      ],

      app: paths.appIndexJs,

  }

pages를 불러올 때 이를 자동으로 pages/index.async.js로 차환하도록 설정

~cra-router/config$ webpack.config.prod.js : plugins

    plugins: [

        new webpack.NormalModuleReplacementPlugin(

            /^pages$/,

            'pages/index.adync.js',

        ),

        new webpack.optimize.CommonsChunkPlugin({

            name: 'vendor'

        }),

      new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),

    ],

배포 : yarn build

static server install : yarn global add serve

static server service : serve -s build

http://localhost:5000 으로 서버에 접속할 수 있다.