介绍
本文中针对使用create-react-app
创建的项目进行项目打包优化,有关Vue
项目中的打包优化可以参考Vue-Cli3+eleUI项目打包优化。
路由懒加载
默认情况下,当下项目根路径下执行npm run build
时,create-react-app
内部使用webpack
将src/
路径下的所有代码打包成一个JS
文件和一个CSS
文件。
当项目代码量过多时,这样就不合适了。
试想,当用户访问登录页面时,浏览器加载的JS
文件还包含其他页面的代码,这会延长网页的加载时间,给用户带来不好的体验。
理想情况下,当用户访问一个页面时,该页面应该只加载自己使用到的代码,所以我们需要代码分片,将JS
代码分片打包到多个文件中,然后在访问页面时按需加载。
如何实现呢?
新建一个专门用来懒加载导入的文件
// asyncComponent.js
import React, { Component } from 'react'
export default function asyncComponent (importComponent) {
class AsyncComponent extends Component {
state = {
component: null // 动态加载的组件
}
componentDidMount () {
importComponent().then(mod => {
this.setState({
component: mod.default ? mod.default : mod
})
})
}
render () {
// 渲染动态加载的组件
const C = this.state.component
return C ? <C {...this.props} /> : null
}
}
return AsyncComponent
}
路由文件中使用
// router/index.js
import asyncComponent from './asyncComponent'
const Login = asyncComponent(() => import('../views/login'))
const appRoutes = [
{
path: '/login',
component: Login
}
]
export { appRoutes }
执行打包
npm run build
会看到打包后的js
文件的chunk
会被分成好多个代码分片,并且文件都有对应的文件名,因为我们使用了Magic Comments
魔术注释法。
我们看webpack
中对打包的chunkName
的配置
对,name
没有生效,自动生成的都是数字。
这样[name]
就被我们自定义啦!
版本号
create-react-app@3.3.0
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"webpack": "4.44.2",
"webpack-dev-server": "3.11.0",