Webpack优化

优化构建速度

优化resolve配置

1. 指定引入模块的寻址范围

const config = {
  //优先 src 目录下查找需要解析的文件，会大大节省查找时间
  resolve: {
     modules: [resolve('src'), 'node_modules'],
  },
};

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

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

3. 指定模块的后缀

const config = {
  resolve: {
   // 引入模块时不带扩展名，从右往左依次解析
    extensions: ['.js', '.json', '.wasm'],
  },
};

4. 指定loader寻址范围，一般情况下保持默认配置就可以了，但如果有自定义的 Loader 就需要配置一下，不配可能会因为找不到 loader 报错。

const config = {
  resolveLoader: {
    modules: ['node_modules',resolve('loader')]
  },
};

externals

externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法。此功能通常对 library 开发人员来说是最有用的。然而也会有各种各样的应用程序用到它，我们希望在使用时，仍然可以通过 import 的方式去引用(如 import $ from ‘jquery’)，并且希望 webpack 不会对其进行打包，此时就可以配置 externals。

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

module.exports = {
    externals: {
        // jquery通过script引入之后，全局中即有了 jQuery 变量
        'jquery': 'jQuery'
    }
}

使用

import $ from 'jquery';
$('element');

exclude&include&noParse

1. exclude/include
   通过 exclude、include 配置确保转译尽可能少的文件。exclude 指定要排除的文件（优先级更高），include 指定要包含的文件。

module.exports = {
    module: {
        rules: [
            {
                test: /\.js[x]?$/,
                use: ['babel-loader'],
                include: [path.resolve(__dirname, 'src')]
            }
        ]
    },
}

3. noParse
   如果你使用到了不需要解析的第三方依赖，使用 noParse 进行忽略的模块文件中不会解析 import、require 等语法。类似loash

//webpack.config.js
module.exports = {
    //...
    module: {
        noParse: /jquery|lodash/
    }
}

开启缓存

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

module.exports = {
    module: {
        rules: [
            {
                test: /\.js[x]?$/,
                use: ['babel-loader'],
                include: [path.resolve(__dirname, 'src')],
                options: {
	              cacheDirectory: true // 启用缓存
	            }
            }
        ]
    },
}

• cache-loader
  性能开销较大的 loader 之前添加 cache-loader，将结果缓存中磁盘中。默认保存在 node_modueles/.cache/cache-loader 目录下

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

• cache 持久化
  通过配置 cache 缓存生成的 webpack 模块和 chunk，来改善构建速度

const config = {
  cache: {
    type: 'filesystem',
  },
};

• DLL
  webpack5官方不建议使用

IgnorePlugin插件

IgnorePlugin webpack 的内置插件，作用是忽略第三方包指定目录。

//webpack.config.js
module.exports = {
    //...
    plugins: [
        //忽略 moment 下的 ./locale 目录
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
    ]
}

在使用的时候，如果我们需要指定语言，那么需要我们手动的去引入语言包，例如，引入中文语言包:

import moment from 'moment';
import 'moment/locale/zh-cn';// 手动引入

index.js 中只引入 moment，打包出来的 bundle.js 大小为 263KB，如果配置了 IgnorePlugin，单独引入 moment/locale/zh-cn，构建出来的包大小为 55KB。

多进程编译

thread-loader
配置在 thread-loader 之后的 loader 都会在一个单独的 worker 池（worker pool）中运行

优化构建结果

压缩 CSS

安装

npm install -D optimize-css-assets-webpack-plugin

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')

const config = {
  optimization: {
    minimize: true,
    minimizer: [
      // 添加 css 压缩配置
      new OptimizeCssAssetsPlugin({}),
    ]
  },
}

压缩Js

在生成环境下打包默认会开启 js 压缩，但是当我们手动配置 optimization 选项之后，就不再默认对 js 进行压缩，需要我们手动去配置。

webpack5 内置了terser-webpack-plugin 插件，所以我们不需重复安装，直接引用就可以了，具体配置如下

const TerserPlugin = require('terser-webpack-plugin');

const config = {
  // ...
  optimization: {
    minimize: true, // 开启最小化
    minimizer: [
      // ...
      new TerserPlugin({})
    ]
  },
  // ...
}

Tree-shaking

Tree-shaking 作用是剔除没有使用的代码，以降低包的体积。webpack 默认支持，需要在 .bablerc 里面设置 model：false，即可在生产环境下默认开启。

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        module: false,
        useBuiltIns: "entry",
        corejs: "3.9.1",
        targets: {
          chrome: "58",
          ie: "11",
        },
      },
    ],
  ],
  plugins: [    
    ["@babel/plugin-proposal-decorators", { legacy: true }],
    ["@babel/plugin-proposal-class-properties", { loose: true }],
  ]
};

优化运行时体验

splitChunks 拆包配置

公共代码只需要下载一次就缓存起来了，避免了重复下载。
项目中打包出来的 bundle.js 体积过大，我们可以将一些依赖打包成动态链接库，然后将剩下的第三方依赖拆出来。这样可以有效减小 bundle.js 的体积大小。当然，你还可以继续提取业务代码的公共模块。

//webpack.config.js
module.exports = {
    optimization: {
        splitChunks: {//分割代码块
            cacheGroups: {
                vendor: {
                    //第三方依赖
                    priority: 1, //设置优先级，首先抽离第三方模块
                    name: 'vendor',
                    test: /node_modules/,
                    chunks: 'initial',
                    minSize: 0,
                    minChunks: 1 //最少引入了1次
                },
                //缓存组
                common: {
                    //公共模块
                    chunks: 'initial',
                    name: 'common',
                    minSize: 100, //大小超过100个字节
                    minChunks: 3 //最少引入了3次
                }
            }
        }
    }
}

代码懒加载

针对首屏加载不太需要的一些资源，我们可以通过懒加载的方式去实现。

// 点击后在夹子啊加载
img.addEventListener('click', () => {
  import('./Modal.jsx').then(({ default: element }) => {
    console.log(element)
    document.body.appendChild(element)
  })
})

prefetch 与 preload

使用异步加载的方式引入图片的描述，但是如果需要异步加载的文件比较大时，在点击的时候去加载也会影响到我们的体验，这个时候我们就可以考虑使用 prefetch 来进行预拉取。

// prefetch 
import(/* webpackPrefetch: true */ './Modal.jsx');
// preload
import(/* webpackPreload: true */ './Modal.jsx');

prefetch (预获取)：浏览器空闲的时候进行资源的拉取。
preload (预加载)：提前加载后面会用到的关键资源, 因为会提前拉取资源，如果不是特殊需要，谨慎使用。

项目优化

1. 路由懒加载。
2. 第三方库按需加载，大部分的组件库都支持，而lodash这类工具库不要整个引入。

   // bad
   import { debounce } from 'lodash'
   // good
   import debounce from 'lodash/debounce'
   

3. 图片懒加载。
4. 开启gzip，nginx进行配置，很强项目大小缩减能达到60~70%。
5. 静态资源设置缓存策略，index.html不设置，css、js、font、media、image设置缓存。
6. 代码懒加载。
7. 生产移除sourceMap，移除console.log等日志打印
8. 使用体积更小的库