webpack打包优化指南

webpack打包优化指南

      • 前言
      • 一、浏览器(chrome)运行指标
      • 二、优化方式
        • 1、webpack打包
        • 2、 懒加载
          • • 在 `react` 项目中推荐在 **`路由层面`** 进行懒加载
          • • 如果某个组件代码量非常大,也可在 **`组件层面`** 进行懒加载
          • • `动态加载`第三方库
        • 3、 资源文件打包。
          • - base64 编码
          • - 预加载
          • - 项目中的不需要的包,请务必移除
          • - 使用everest-cli的项目,可以使用命令everest build -r来生成打包报告文件,在这个文件里面我们可以查看每个模块打包后的大小。以针对性的优化
          • - 打包后应尽量保证 html 中初始 js 个数不超过 6 个,从而上浏览器能够并行加载
          • - babel 配置
      • 三、优化指导:

前言

目前所有公司项目的代码量都比较大,打包出来的文件会很大,甚至导致打包压缩代码时内存不足,页面加载速度也较慢。为了优化加载速度,下面提供一些编码指导建议:

一、浏览器(chrome)运行指标

  1. 浏览器请求并发数量,chrome 请求并发数量为 6
  2. 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 时,文件大小会变得非常大。小文件影响不大

- 预加载

提前加载未来要访问页面的资源,在使用代码切割的时候,我们可以使用预加载的方式加载后续要用到的资源。目前 ChromeFirefoxIE11 都有一定的支持。everest-cli默认支持 cssjsprefetch,不需要额外的配置


<link href="./static/js/chunk-b2e731ba.c6d62f25.js" rel="prefetch" />
- 项目中的不需要的包,请务必移除

在部分项目中,页面中没有使用到的包依然被保留下来了,导致打包后的文件非常大。

- 使用everest-cli的项目,可以使用命令everest build -r来生成打包报告文件,在这个文件里面我们可以查看每个模块打包后的大小。以针对性的优化
- 打包后应尽量保证 html 中初始 js 个数不超过 6 个,从而上浏览器能够并行加载
- babel 配置

babel 配置时@babel/preset-envmodules字段,请尽量不要使用cjs,使用cjs时,将不能支持动态导入文件,导致页面初始加载文件较大

三、优化指导:

  1. 在不能减少代码总体文件的情况下,尽量 减少首屏加载 的文件,让用户尽快看到页面,让用户在后续使用的时候渐进的去加载文件
  2. 合理拆分文件,尽量保证文件大小相差不太大,拆分文件不宜太多,导致加载速度过慢
  3. 配合后端Nginx合理利用 静态资源的强缓存 来加快访问效率

你可能感兴趣的:(webpack,前端,node.js)