基于@loadable/component以及@babel/plugin-syntax-dynamic-import代码切割

React路由懒加载，实现代码切割，实现按需加载，减小文件体积

• 安装依赖

  "@loadable/component": "^5.15.0",
  "@babel/plugin-syntax-dynamic-import": "^7.8.3",
  

• 配置@loadable/component懒加载

  import React from 'react'
  import loadable from '@loadable/component'
  
  const Index = (props)=> {
    const component = props.route.component
    const LoadableBar = loadable(async () => {
      try {
        return await import(/* webpackChunkName: '[request]' */ `../pages${component}`)
      } catch (error) {
        return import('../pages/error/404')
      }
    })
  
    return <LoadableBar />
  }
  
  export default Index
  

  • 注意 /* webpackChunkName: ‘[request]’ */ 配置比较关键 ，request为动态产生，生成文件名称为代码目录名称 如图
    

• 如果你是typeScript编写脚本，需要在tsconfig.json里面配置compilerOptions.module为esnext否则该配置无效

• 配置wenpack.config.js中的chunkFilename

  module.exports = {
  	output: {
  	    path: path.resolve(__dirname, 'build'),
  	    filename: 'assets/[name].[hash].js',
  	    chunkFilename: 'assets/[name].[hash].js',
  	},
  }
  

• babel.config.js新增配置

  	module.exports = {
  	  plugins: [
  	  	    ['@babel/plugin-syntax-dynamic-import'],
  	  ]
  	}
  

*小结：配置完后打包即可得到更优分包，实现路由按需切割以及页面加载，是一种优化手段