写点什么

Webpack 构建速度优化

作者:Geek_02d948
  • 2022-10-27
    浙江
  • 本文字数:3152 字

    阅读完需:约 10 分钟

前言

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

目录

  • 缩小范围

  • noParse

  • IgnorePlugin

  • 优化 resolve 配置

  • externals

  • 缓存

缩小范围

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


  • **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 进行忽略的模块文件中不会解析 importrequire 等语法


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 在解析的时候,就可以从我们设置的扩展名中从左往右进行判断


需要注意的是:


  • 高频文件后缀名放前面;

  • 手动配置后,默认配置会被覆盖

  • 参考 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
复制代码


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

缓存

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',         ]      },       // ...    ]  }}
复制代码

dll 动态链接(已弃用)

在 webpack5.x 中已经不建议使用这种方式进行模块缓存,因为其已经内置了更好体验的 cache 方法

hard-source-webpack-plugin

hard-source-webpack-plugin 为模块提供了中间缓存,重复构建时间大约可以减少 80%,但是在 webpack5 中已经内置了模块缓存,不需要再使用此插件


用户头像

Geek_02d948

关注

还未添加个人签名 2022-09-08 加入

还未添加个人简介

评论

发布
暂无评论
Webpack构建速度优化_webpack_Geek_02d948_InfoQ写作社区