Webpack 实践：合理地拆分代码，提升性能-JavaScript中文网-JavaScript教程资源分享门户

Webpack 是一个模块化打包工具，可以将各种资源（JavaScript、CSS、图片、字体等）进行模块化管理和打包。在复杂的前端项目中，很多时候我们需要将代码拆分成更小的模块，才能更好地维护和提高代码复用率。

但是拆分过多的代码会导致打包后的文件过大，加载速度慢，影响用户体验。因此，我们需要在拆分代码时注意合理地拆分，避免过度拆分，同时提高项目性能。

本文将介绍如何在 Webpack 中合理地拆分代码，包括代码拆分的常见方式和最佳实践，供前端开发者参考和借鉴。

代码拆分的常见方式

以下是几种常见的代码拆分方式：

1. 入口拆分

将应用程序的不同部分分别作为不同的入口，并在 Webpack 配置中指定它们，可以实现代码拆分。每个入口文件都加载其自己所需的模块，因此可以避免将所有代码都打包到同一个文件中。

// javascriptcn.com 代码示例
// webpack.config.js

module.exports = {
  entry: {
    main: './src/main.js',
    vendor: './src/vendor.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js'
  }
};

上例中，我们通过 entry 属性指定两个入口文件 main.js 和 vendor.js，它们最终被打包为 main.bundle.js 和 vendor.bundle.js。这种方式常常用于拆分应用程序和第三方库的代码。

2. 动态导入

动态导入是一种在运行时才能确定需加载的代码的方式。它可以帮助我们将代码拆分成更小的模块，避免将所有代码都打包到同一个文件中。

// main.js

import('lodash').then((_) => {
  // use lodash here
});

上例中，我们通过 import 函数动态加载 Lodash 这个库，这样该库的代码就不会被打包到 main.bundle.js 中了。而是在运行时才动态加载。

3. 按需加载

按需加载是一种根据用户需求动态加载不同代码的方式。它可以帮助我们将用户访问到的页面分割为不同的代码块，只加载当前页面所需的代码块，避免加载整个应用程序的代码。

// javascriptcn.com 代码示例
// main.js

import('./dynamic.js').then((module) => {
  // use dynamic module here
});

// dynamic.js

console.log('this module can be loaded on demand');

上例中，我们可以通过 import 函数加载 dynamic.js 这个模块，在用户访问某个页面时再动态加载该模块。这样，当用户访问到该页面时，只会加载该模块的代码块，避免同时加载所有代码块造成性能损耗。

Webpack 代码拆分最佳实践

除了上述代码拆分方式，我们还需要注意一些最佳实践，以避免过度拆分和提高项目性能。

1. 避免重复打包

在通过 require 或 import 引用同一模块的多个文件中，Webpack 会为该模块生成多份代码块。这样会造成代码冗余和打包后文件增大，因此我们需要避免此类问题。

可以通过代码拆分文件依赖来避免重复打包，或通过插件和 Webpack 4 中的 optimization 属性解决该问题。

// javascriptcn.com 代码示例
// webpack.config.js

module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all'
        }
      }
    }
  }
};

在上例中，我们通过 cacheGroups 属性设置了一个 vendor 缓存组，用于将所有来自 node_modules 目录的模块进行拆分。这样可以避免重复打包和减少包的体积。

2. 动态导入的正确使用

动态导入可以帮助我们将应用程序拆分成更小的模块。在使用此方式时，需要注意以下问题：

需要使用 Babel 编译器的 Syntax Dynamic Import 支持。
动态导入的模块返回值应该是一个异步导出的模块对象。
动态导入模块应该放在一个可访问到的位置，如 publicPath。

// javascriptcn.com 代码示例
// main.js

(function () {
  let button = document.createElement('button');
  button.innerText = 'Click me';
  button.onclick = async () => {
    const module = await import('./dynamic.js');
    const dynamic = module.default;
    dynamic();
  };
  document.body.appendChild(button);
})();

// dynamic.js

function dynamic () {
  console.log('dynamic message!');
}

export default dynamic;

在上例中，我们通过一个按钮来加载 dynamic.js 模块，在加载完成后再执行相应的操作。动态导入可以帮助我们将复杂的应用程序拆分成更小的代码块，提高应用性能和用户体验。

3. 优化打包构建

在生产环境部署时，需要遵循以下最佳实践：

将 Webpack 打包构建的代码用于生产环境。

module.exports = {
  mode: 'production'
};

启用 Tree Shaking 优化。

module.exports = {
  optimization: {
    minimize: true,
    usedExports: true
  }
};

合并公共模块，减少网络请求。

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

使用长效缓存策略。

// javascriptcn.com 代码示例
const path = require('path');
const WebpackMd5Hash = require('webpack-md5-hash');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  output: {
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new WebpackMd5Hash(),
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
      chunkFilename: '[id].[contenthash].css'
    })
  ]
};

在上例中，我们使用 webpack-md5-hash、MiniCssExtractPlugin 等插件，配合 chunkhash 和 contenthash 等长效缓存策略，优化打包构建和保证资源文件的版本管理。

总结

通过合理地拆分代码，遵循最佳实践和优化打包构建，我们可以有效地提高应用性能和用户体验。WebPack的诸多特性可以帮助我们实现更细粒度的代码拆分，进一步提升应用性能，这也是现代化前端应用程序开发的必要技能。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/651d37e295b1f8cacd4c0048