webpack 代码分割和动态import

一、代码分割和异步加载的意义

代码分割就是我们根据实际业务需求将代码进行分割，然后在合适的时候在将其加载进入文档中。通过这些可以减少js文件的大小，并加快首屏渲染的速度

 

二、实现

// 安装
npm i @babel/plugin-syntax-dynamic-import -D  

// .babelrc
{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "@babel/plugin-syntax-dynamic-import"
    ]
}

此时，我们有一个要动态加载的组件：text.js

在index.js中懒加载js

当点击最后一个图标后，会动态加载js

github项目地址：webpack动态加载