入门webpack的最佳实践（基于webpack4.X 5.X）--打包速度优化

Jou

发布于 2022-09-28 14:11:15

9590

发布于 2022-09-28 14:11:15

文章被收录于专栏：前端技术归纳前端技术归纳

theme: channing-cyan

导语

来到这家公司之后，一直在使用webpack，也写了不少笔记，但是都比较零散，现在决定整理一下webpack相关的知识点，由浅入深，方便自己后续查漏补缺，后续会一直更新。

前言

当我们的项目越来越大，webpack的配置项越来越多时，构建速度会越来越慢，所以我们需要通过一些配置来提高webpack的构建速度。

缩小范围

在配置 loader 的时候，我们需要更精确的去指定 loader 的作用目录或者需要排除的目录，通过使用 include 和 exclude 两个配置项，可以实现这个功能，常见的例如：

**include**：符合条件的模块进行解析
**exclude**：排除符合条件的模块，不解析，优先级更高

这样一来，一开始构建，我们就能去除一些选项，比如，在使用babel-loader的时候

{
  test: /\.jsx?$/,
  use: [
    {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env', '@babel/react'],
        plugins: [[require('@babel/plugin-proposal-decorators'), { legacy: true }]],
        cacheDirectory: true, // 启用缓存
      },
    },
  ],
  include: path.resolve(__dirname, 'src'),
  exclude: /node_modules/,
 },

noParse

对于我们引入的一些第三方包，比如jQuery，在这些包内部是肯定不会依赖别的包，所以根本不需要webpack去解析它内部的依赖关系，使用 noParse 进行忽略的模块文件中不会解析 import、require 等语法

module：{
    noParse：/jquery|lodash/
}

IgnorePlugin

有很多的第三方包内部会做国际化处理，包含很多的语言包，而这些语言包对我们来说时没有多大用处的，只会增大包的体积，我们完全可以忽略掉这些语言包，从而提高构建效率，减小包的体积。

用法

requestRegExp 表示要忽略的路径。

contextRegExp 表示要忽略的文件夹目录。

new webpack.IgnorePlugin({ resourceRegExp, contextRegExp });

以moment为例，首先找到moment中语言包所在的文件夹，然后在webpack配置文件中添加插件

new webpack.IgnorePlugin(/./locale/, /moment/)

也可以写成

new webpack.IgnorePlugin({
resourceRegExp: /^\.\/locale$/,
contextRegExp: /moment$/,
}),

这时候moment使用默认语言英语，如果要使用别的语言，可以手动引入需要使用的语言包。

import moment from 'moment'
import 'moment/locale/zh-cn'
moment.locale('zh-CN')

优化 resolve 配置

alias

alias 用的创建 import 或 require 的别名，用来简化模块引用，项目中基本都需要进行配置。

const path = require('path')
{
  ...
  resolve:{
    // 配置别名
    alias: {
      '~': resolve('src'),
      '@': resolve('src'),
      'components': resolve('src/components'),
    }
  }
}

配置完成之后，我们在项目中就可以

// 使用 src 别名 ~ 
import '~/fonts/iconfont.css'

// 使用 src 别名 @ 
import '@/fonts/iconfont.css'

除此之外，因为一些第三方库，如react，我们在安装的时候，实际上已经安装好了它编译好的包，所以我们在这里可以直接指定别名路径

alias: {
react: path.resolve(
          dirname,
          '../node_modules/react/umd/react.production.min.js'
       ),
}

配合上noParse，在使用的时候，就无须在构建一遍react

noParse: /react\.production\.min\.js$/,

extensions

在webpack中，我们可以预先设定一些文件的扩展名

webpack 默认配置

const config = {
  //...
  resolve: {
    extensions: ['.js', '.json', '.wasm'],
  },
};

如果在编写的时候不带文件后缀，如

import file from '../path/to/file';

webpack在解析的时候，就可以从我们设置的扩展名中从左往右进行判断

需要注意的是：

高频文件后缀名放前面；
手动配置后，默认配置会被覆盖

如果想保留默认配置，可以用 ... 扩展运算符代表默认配置，例如

const config = {
  //...
  resolve: {
    extensions: ['.ts', '...'], 
  },
};

modules

告诉 webpack 解析模块时应该搜索的目录，常见配置如下

const path = require('path');

// 路径处理方法
function resolve(dir){
  return path.join(__dirname, dir);
}

const config = {
  //...
  resolve: {
     modules: [resolve('src'), 'node_modules'],
  },
};

告诉 webpack 优先 src 目录下查找需要解析的文件，会大大节省查找时间

externals

externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法，因为我们在每次打包的时候，有些依赖的变动很小，所以我们可以不选择不把依赖打包进去，而使用script标签的形式来加载他。

比如react和react-dom，我们在页面中引入它

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin="anonymous"></script>

然后配置externals

externals: {
     react: 'React',
     'react-dom': 'ReactDOM',
},

注意这里配置项的键值是package.json文件中依赖库的名称，而value值代表的是第三方依赖编译打包后生成的js文件，然后js文件执行后赋值给window的全局变量名称。

我们可以通过下面的方法，来找这个全局变量

上面所说的js文件就是要用CDN引入的js文件。那么可以通过浏览器打开CDN链接，选择没有压缩过的那种(不带min)，比如

https://cdn.bootcdn.net/ajax/libs/react/18.2.0/cjs/react-jsx-dev-runtime.development.js

然后在它的源代码里面找，类似与导出赋值这种代码

这里提供一个找各种cdn链接的网站: https://www.bootcdn.cn/

缓存

webpack5提供了非常强大的持久化缓存的能力，开箱即用

catch缓存

webpack5新加了缓存项配置，具体如下

默认缓存路径在node_modules/.cache/webpack

// 缓存配置 
    cache: {
      type: 'filesystem',  // 开启持久化缓存
      version: createEnvironmentHash(env.raw),  // 参考react脚手架的配置 可以记录打包缓存的版本
      cacheDirectory: path.appWebpackCache, // 缓存路径
      store: 'pack',
      // 构建依赖，如果有文件修改，则重新执行打包流程
      buildDependencies: {
        defaultWebpack: ['webpack/lib/'],
        config: [__filename],
      },
    },

babel-loader 开启缓存

abel 在转译 js 过程中时间开销比价大，将 babel-loader 的执行结果缓存起来，重新打包的时候，直接读取缓存

缓存位置： node_modules/.cache/babel-loader

配置

//支持转义ES6/ES7/JSX
{
  test: /\.jsx?$/,
  use: [
    {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env', '@babel/react'],
        plugins: [
          [
            require('@babel/plugin-proposal-decorators'),
            { legacy: true },
          ],
        ],
        cacheDirectory: true, // 启用缓存
      },
    },
  ],
  include: path.resolve(__dirname, 'src'),
  exclude: /node_modules/,
},

cache-loader

缓存一些性能开销比较大的 loader 的处理结果，缓存位置：node_modules/.cache/cache-loader

配置 cache-loader

const config = {
 module: { 
    // ...
    rules: [
      {
        test: /.(s[ac]|c)ss$/i, //匹配所有的 sass/scss/css 文件
        use: [
          // 'style-loader',
          MiniCssExtractPlugin.loader,
          'cache-loader', // 获取前面 loader 转换的结果
          'css-loader',
          'postcss-loader',
          'sass-loader', 
        ]
      }, 
      // ...
    ]
  }
}