目前所有公司项目的代码量都比较大,打包出来的文件会很大,甚至导致打包压缩代码时内存不足,页面加载速度也较慢。为了优化加载速度,下面提供一些编码指导建议:
chrome
请求并发数量为 6
个webpack
优化目的是为了提高首屏加载速度,即保证用户先看到整体页面框架,减少白屏时间。webpack
打包时合理的拆分文件,可以配置自动进行了 文件切割
,切割后文件最大不会超过 1MB
。主要配置内容如下:
module.exports = {
/** 其他wenpack配置 */
optimization: {
splitChunks: {
chunks: 'all',
name: false,
minSize: 600 * 1024,
maxSize: 1000 * 1024
}
}
}
代码中使用 懒加载
的方式加载文件。在 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')
}
}
资源文件包含图片、视频、音频、字体等文件,在配置url-loader
的时候一定要注意配置limit
选项
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192 // 文件小于8k时,会被编译为base64,否则会以单独的文件的形式
}
}
]
}
]
}
}
通常会比原有文件大 33%左右,所以当大文件编译为 base64 时,文件大小会变得非常大。小文件影响不大
提前加载未来要访问页面的资源,在使用代码切割的时候,我们可以使用预加载的方式加载后续要用到的资源。目前 Chrome
, Firefox
,IE11
都有一定的支持。everest-cli
默认支持 css
和 js
的 prefetch
,不需要额外的配置
<link href="./static/js/chunk-b2e731ba.c6d62f25.js" rel="prefetch" />
在部分项目中,页面中没有使用到的包依然被保留下来了,导致打包后的文件非常大。
babel
配置时@babel/preset-env
的modules
字段,请尽量不要使用cjs
,使用cjs
时,将不能支持动态导入文件,导致页面初始加载文件较大
减少首屏加载
的文件,让用户尽快看到页面,让用户在后续使用的时候渐进的去加载文件合理拆分文件
,尽量保证文件大小相差不太大,拆分文件不宜太多,导致加载速度过慢Nginx
合理利用 静态资源的强缓存
来加快访问效率