前言

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

目录

  • 放大范畴
  • noParse
  • IgnorePlugin
  • 优化 resolve 配置
  • externals
  • 缓存

放大范畴

在配置 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在解析的时候，就能够从咱们设置的扩展名中从左往右进行判断

须要留神的是：

  • 高频文件后缀名放后面；
  • 手动配置后，默认配置会被笼罩
  • 参考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/[email protected]/umd/react.development.js" crossorigin="anonymous"></script><script src="https://unpkg.com/[email protected]/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 中曾经内置了模块缓存，不须要再应用此插件