webpack打包优化指南

前言

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

一、浏览器(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" />

- 项目中的不需要的包，请务必移除

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

- 使用everest-cli的项目，可以使用命令everest build -r来生成打包报告文件，在这个文件里面我们可以查看每个模块打包后的大小。以针对性的优化

- 打包后应尽量保证 html 中初始 js 个数不超过 6 个，从而上浏览器能够并行加载

- babel 配置

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

三、优化指导：

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