前言
目前所有公司项目的代码量都比较大，打包出来的文件会很大，甚至导致打包压缩代码时内存不足，页面加载速度也较慢。为了优化加载速度，下面提供一些编码指导建议：
一、浏览器(chrome)运行指标
- 浏览器请求并发数量，
chrome请求并发数量为6个 -
webpack优化目的是为了提高首屏加载速度，即保证用户先看到整体页面框架，减少白屏时间。
二、优化方式
1、webpack打包
webpack 打包时合理的拆分文件，可以配置自动进行了 文件切割 ，切割后文件最大不会超过 1MB。主要配置内容如下：
module.exports = {
/** 其他wenpack配置 */
optimization: {
splitChunks: {
chunks: 'all',
name: false,
minSize: 600 * 1024,
maxSize: 1000 * 1024
}
}
}
2、 懒加载
代码中使用 懒加载 的方式加载文件。在 webpack4 中，动态加载文件直接使用import('xxx')的方式即可。
• 在 react 项目中推荐在 路由层面 进行懒加载
import React, { Suspense, lazy } from 'react'
import { HashRouter, Switch, Route } from 'react-router-dom'
export default function App() {
return (
<HashRouter>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route path="/" component={lazy(() => import('./routes/Home'))} exact />
<Route path="/settings" component={lazy(() => import('./routes/Settings'))} exact />
<Route component={lazy(() => import('./routes/404'))} />
</Switch>
</Suspense>
</HashRouter>
)
}
• 如果某个组件代码量非常大，也可在 组件层面 进行懒加载
import React, { Suspense } from 'react'
const OtherComponent = React.lazy(() => import('./OtherComponent'))
const AnotherComponent = React.lazy(() => import('./AnotherComponent'))
const MyComponent = () => (
<div>
<Suspense fallback={<div>Loading...</div>}>
<section>
<OtherComponent />
<AnotherComponent />
</section>
</Suspense>
</div>
)
• 动态加载第三方库
import React from 'react'
export default class SimpEditor extends React.Component {
async componentDidMount() {
// 由于simditor比较大，所以在组件挂在后再去加载
// 加载过程中可添加相应的加载动画
const Simditor = await import(/* webpackChunkName: "simditor" */ 'simditor')
}
}
3、 资源文件打包。
资源文件包含图片、视频、音频、字体等文件，在配置url-loader的时候一定要注意配置limit选项
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192 // 文件小于8k时，会被编译为base64，否则会以单独的文件的形式
}
}
]
}
]
}
}
- base64 编码
通常会比原有文件大 33%左右，所以当大文件编译为 base64 时，文件大小会变得非常大。小文件影响不大
- 预加载
提前加载未来要访问页面的资源，在使用代码切割的时候，我们可以使用预加载的方式加载后续要用到的资源。目前 Chrome， Firefox，IE11 都有一定的支持。everest-cli默认支持 css 和 js 的 prefetch，不需要额外的配置
<!-- prefetch使用方式 -->
<link href="./static/js/chunk-b2e731ba.c6d62f25.js" rel="prefetch" />
- 项目中的不需要的包，请务必移除
在部分项目中，页面中没有使用到的包依然被保留下来了，导致打包后的文件非常大。文章来源：https://www.toymoban.com/news/detail-564106.html
- 使用everest-cli的项目，可以使用命令everest build -r来生成打包报告文件，在这个文件里面我们可以查看每个模块打包后的大小。以针对性的优化
- 打包后应尽量保证 html 中初始 js 个数不超过 6 个，从而上浏览器能够并行加载
- babel 配置
babel 配置时@babel/preset-env的modules字段，请尽量不要使用cjs，使用cjs时，将不能支持动态导入文件，导致页面初始加载文件较大文章来源地址https://www.toymoban.com/news/detail-564106.html
三、优化指导：
- 在不能减少代码总体文件的情况下，尽量
减少首屏加载的文件，让用户尽快看到页面，让用户在后续使用的时候渐进的去加载文件 -
合理拆分文件，尽量保证文件大小相差不太大，拆分文件不宜太多，导致加载速度过慢 - 配合后端
Nginx合理利用静态资源的强缓存来加快访问效率
到了这里，关于webpack打包优化指南的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
