前言
目前所有公司項(xiàng)目的代碼量都比較大，打包出來(lái)的文件會(huì)很大，甚至導(dǎo)致打包壓縮代碼時(shí)內(nèi)存不足，頁(yè)面加載速度也較慢。為了優(yōu)化加載速度，下面提供一些編碼指導(dǎo)建議：
一、瀏覽器(chrome)運(yùn)行指標(biāo)
- 瀏覽器請(qǐng)求并發(fā)數(shù)量，
chrome請(qǐng)求并發(fā)數(shù)量為6個(gè) -
webpack優(yōu)化目的是為了提高首屏加載速度，即保證用戶先看到整體頁(yè)面框架，減少白屏?xí)r間。
二、優(yōu)化方式
1、webpack打包
webpack 打包時(shí)合理的拆分文件，可以配置自動(dòng)進(jìn)行了 文件切割 ，切割后文件最大不會(huì)超過(guò) 1MB。主要配置內(nèi)容如下：
module.exports = {
/** 其他wenpack配置 */
optimization: {
splitChunks: {
chunks: 'all',
name: false,
minSize: 600 * 1024,
maxSize: 1000 * 1024
}
}
}
2、 懶加載
代碼中使用 懶加載 的方式加載文件。在 webpack4 中，動(dòng)態(tài)加載文件直接使用import('xxx')的方式即可。
? 在 react 項(xiàng)目中推薦在 路由層面 進(jìn)行懶加載
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>
)
}
? 如果某個(gè)組件代碼量非常大，也可在 組件層面 進(jìn)行懶加載
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>
)
? 動(dòng)態(tài)加載第三方庫(kù)
import React from 'react'
export default class SimpEditor extends React.Component {
async componentDidMount() {
// 由于simditor比較大，所以在組件掛在后再去加載
// 加載過(guò)程中可添加相應(yīng)的加載動(dòng)畫(huà)
const Simditor = await import(/* webpackChunkName: "simditor" */ 'simditor')
}
}
3、 資源文件打包。
資源文件包含圖片、視頻、音頻、字體等文件，在配置url-loader的時(shí)候一定要注意配置limit選項(xiàng)
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192 // 文件小于8k時(shí)，會(huì)被編譯為base64，否則會(huì)以單獨(dú)的文件的形式
}
}
]
}
]
}
}
- base64 編碼
通常會(huì)比原有文件大 33%左右，所以當(dāng)大文件編譯為 base64 時(shí)，文件大小會(huì)變得非常大。小文件影響不大
- 預(yù)加載
提前加載未來(lái)要訪問(wèn)頁(yè)面的資源，在使用代碼切割的時(shí)候，我們可以使用預(yù)加載的方式加載后續(xù)要用到的資源。目前 Chrome， Firefox，IE11 都有一定的支持。everest-cli默認(rèn)支持 css 和 js 的 prefetch，不需要額外的配置
<!-- prefetch使用方式 -->
<link href="./static/js/chunk-b2e731ba.c6d62f25.js" rel="prefetch" />
- 項(xiàng)目中的不需要的包，請(qǐng)務(wù)必移除
在部分項(xiàng)目中，頁(yè)面中沒(méi)有使用到的包依然被保留下來(lái)了，導(dǎo)致打包后的文件非常大。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-564106.html
- 使用everest-cli的項(xiàng)目，可以使用命令everest build -r來(lái)生成打包報(bào)告文件，在這個(gè)文件里面我們可以查看每個(gè)模塊打包后的大小。以針對(duì)性的優(yōu)化
- 打包后應(yīng)盡量保證 html 中初始 js 個(gè)數(shù)不超過(guò) 6 個(gè)，從而上瀏覽器能夠并行加載
- babel 配置
babel 配置時(shí)@babel/preset-env的modules字段，請(qǐng)盡量不要使用cjs，使用cjs時(shí)，將不能支持動(dòng)態(tài)導(dǎo)入文件，導(dǎo)致頁(yè)面初始加載文件較大文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-564106.html
三、優(yōu)化指導(dǎo)：
- 在不能減少代碼總體文件的情況下，盡量
減少首屏加載的文件，讓用戶盡快看到頁(yè)面，讓用戶在后續(xù)使用的時(shí)候漸進(jìn)的去加載文件 -
合理拆分文件，盡量保證文件大小相差不太大，拆分文件不宜太多，導(dǎo)致加載速度過(guò)慢 - 配合后端
Nginx合理利用靜態(tài)資源的強(qiáng)緩存來(lái)加快訪問(wèn)效率
到了這里，關(guān)于webpack打包優(yōu)化指南的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
