Webpack 四个打包优化小知识，让开发更流畅

2023-09-09 03:37:48

在前端开发中，Webpack 是一个不可或缺的工具，它可以将我们的代码转换成浏览器可以理解的格式。然而，在打包过程中，可能会遇到一些问题，比如打包时间过长、打包后的代码体积过大等。为了解决这些问题，我们可以使用一些优化技巧来优化 Webpack 的打包性能。

分离 CSS

CSS 是影响网页加载速度的重要因素之一。如果 CSS 文件过大，可能会导致网页加载速度变慢。为了解决这个问题，我们可以使用 Webpack 将 CSS 文件分离成独立的文件，然后在 HTML 页面中单独加载这些 CSS 文件。这样可以减少 HTML 页面中需要加载的资源数量，从而提高网页的加载速度。

要分离 CSS 文件，可以使用 Webpack 的 mini-css-extract-plugin 插件。该插件可以将 CSS 代码从 JavaScript 代码中提取出来，并生成独立的 CSS 文件。

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],
};

代码拆分

代码拆分是一种将代码分成多个小块的技术。这样可以减少每个代码块的大小，从而提高代码的加载速度。Webpack 可以通过使用 splitChunks 配置来实现代码拆分。

该配置可以根据代码块的公共部分和私有部分，将代码块分成多个小块。公共部分的代码块只加载一次，私有部分的代码块只加载一次。这样可以减少代码的加载次数，从而提高代码的加载速度。

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

按需加载

按需加载是一种只加载需要用到的代码的技术。这样可以减少需要加载的代码数量，从而提高代码的加载速度。Webpack 可以通过使用动态 import() 语法来实现按需加载。

动态 import() 语法可以在运行时按需加载模块，而不是在初始加载时加载所有模块。这样可以减少初始加载的代码量，从而提高加载速度。

// 使用动态 import() 语法按需加载模块
import('./module.js').then((module) => {
  // 使用模块
});

使用 DllPlugin

DllPlugin 是一个可以预先编译第三方库的插件。这样可以减少在每次构建应用程序时需要编译的代码数量，从而提高构建速度。

要使用 DllPlugin，首先需要安装该插件。然后，在 Webpack 配置文件中配置该插件。配置完成后，需要运行 webpack --config webpack.dll.config.js 命令来预先编译第三方库。在预先编译完成后，在构建应用程序时，只需要加载预先编译好的第三方库，而不需要重新编译这些库。这样可以提高构建速度。

// webpack.dll.config.js
const path = require('path');
const webpack = require('webpack');

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