Webpack 打包优化

当我们使用 Webpack 进行项目打包时，打包速度的优化是很重要的一步。这里介绍一些具体的优化点。

开启快速模式

在 Webpack 4.x 版本中，默认会开启快速模式，这是因为在该版本中使用了持久化缓存机制，而在 Webpack 3.x 版本中需要手动开启。 可以在 webpack.config.js 文件中的 mode 字段开启，可以选择 development 或 production，即在开发环境或生产环境中，Webpack 会为我们自动配置一些常用的优化项。

module.exports = {
    mode: 'development', // 或者是 'production'
    // ...
};

使用多进程或多线程构建

由于 Webpack 是单线程打包的，因此在打包大型项目时会影响构建速度。可以使用多进程或多线程构建来加快速度。可以使用以下两个插件：

happypack thread-loader

下面是使用 happypack 的例子：

const HappyPack = require('happypack'); 
const os = require('os'); 
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length }); 
module.exports = { 
    // ... 
    module: { 
        rules: [ 
                { 
                  test: /\.js$/, 
                  use: { 
                    loader: 'happypack/loader', 
                    options: { id: 'js' } 
                  } 
                 }
                ] 
              }, 
        plugins: [ 
            new HappyPack({ 
                id: 'js', 
                threadPool: happyThreadPool, 
                loaders: ['babel-loader'] 
              }) 
            ] 
         };

使用 DllPlugin 或者 SplitChunksPlugin 进行代码分离

将一些通用的代码库，例如 React、Vue 和 jQuery 等，分离出来并生成独立的文件可以减少重复的编译过程，从而加快构建的速度。可以使用 DllPlugin 或者 SplitChunksPlugin 来完成此操作。

这里演示下使用 DllPlugin 的方法，以 React 为例： 首先，在 webpack.config.js 文件中定义一个新的配置项：

const webpack = require('webpack');

module.exports = {
// ...
  plugins: [
  new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./dist/react-manifest.json')
   })
 ]
}

然后，在 package.json 文件中添加一个新的脚本用于生成 React 库的 DLL 文件，在脚本中执行构建操作：

{
    "scripts": {
        "build:dll": "webpack --config config/webpack.dll.config.js"
    }
}

最后就是创建一个 webpack.dll.config.js 文件，用于定义 DLL 文件的构建过程：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    react: ['react', 'react-dom']
  },
  output: {
    filename: '[name].dll.js',
    path: path.resolve(__dirname, 'dist'),
    library: '[name]'
  },
  plugins: [
    new webpack.DllPlugin({
    path: path.resolve(__dirname, 'dist/[name]-manifest.json'),
    name: '[name]',
    context: __dirname
  })
 ]
};

运行 npm run build:dll 命令后会生成一个名为 react.dll.js 的文件，可以在项目中直接引用。

配置缓存

使用持久化缓存机制可以加快 Webpack 的打包速度，缓存可以存储在本地或其他路径上以便后续使用。可以使用以下两个插件：

cache-loader hard-source-webpack-plugin

以下是 cache-loader 的例子：

module.exports = { 
    module: { 
      rules: [
        { 
          test: /\.js$/, 
          use: ['cache-loader', 'babel-loader'] 
        } 
       ] 
     } 
  };

在这个例子中，cache-loader 会将前一个 loader 执行的结果缓存到磁盘上。注意，cache-loader 必须放在需要缓存的 loader 的前面。

配置减少文件搜索范围

Webpack 打包时会扫描整个项目，进行依赖分析。可以减少文件搜索的范围来加快搜索时间，可以使用以下的配置项：

module.exports = { 
  // ... 
  resolve: { 
    // 在以下目录中寻找模块
    modules: [path.resolve(__dirname, 'src'), 'node_modules'], 
    // 省略文件后缀 
    extensions: ['.js', '.json', '.jsx', '.css'], 
    // 配置别名 
    alias: { '@': path.resolve(__dirname, 'src') 
   } 
  } 
 };

这当中，modules 指定了 Webpack 所需要搜索的模块目录，而 extensions 指定了可以省略的文件后缀，alias 则可以定义一些常用模块的路径别名。

按需加载代码

将某些不常用的代码延迟到请求时再加载，可以减轻首次加载的负担，提高页面性能。可以使用以下两个插件：

import() bundle-loader

以下是 import() 的例子：

import('./module.js') 
  .then(module => { 
     // ... 
   }) 
   .catch(error => { 
     // ... 
   });

这里，在需要使用的模块中使用 import() 动态加载模块。Webpack 会在打包时将这些代码抽取出来生成单独的 chunk，然后在需要的时候再进行请求加载。

总结

以上是一些 Webpack 打包优化的具体优化点。通过这些优化可以提高 Webpack 的打包速度，从而提高开发者的工作效率。