Webpack 的三个重要构建性能点-JavaScript中文网-JavaScript教程资源分享门户

Webpack 是现代化前端开发中的必备工具，它将多个模块打包成一个或多个静态资源，提高了项目的性能和可维护性。但是，在项目变得庞大和复杂时，Webpack 的性能可能会变得比较低下。为了解决这个问题，我们需要了解Webpack的三个重要构建性能点。

1. 优化打包时间

打包时间是影响开发人员效率的关键因素之一。优化打包时间需要考虑以下方面：

减少依赖项

Webpack 打包的产物是静态资源，而静态资源内部包含许多依赖项，特别是大型项目中。因此，减少不必要的依赖项可以大大减少打包时间。一个有效的方法是仅加载app中实际使用的库。

使用Tree-Shaking

Tree-Shaking 技术可以删除JavaScript中未使用的代码。对于大型库和框架来说，Tree-Shaking 可以帮助您快速有效地删除不必要的代码。使用 Webpack 时，可以配置 optimization.sideEffects 来启用 Tree-Shaking

module.exports = {
  optimization: {
    sideEffects: true
  }
};

懒加载代码

按需加载代码是加快应用启动时间的一种有效方法。Webpack 4 自带了一个新特性，即：动态导入API。可以通过类似下述代码片段来给加载更多的模块

import('path/to/module').then(Module => {
  Module.doSomething()
});

2. 优化编译时间

编译时间指的是Webpack将输入文件转化为产物的时间。在 Webpack 中，可以通过以下几点来优化编译时间：

引入缓存

在使用 Webpack 进行大型项目的开发时，每次加入仅仅是微小的代码修改时，Webpack 都会将所有的代码转换和打包。此时，我们可以使用文件系统缓存插件，使相同的代码不需要每次都处理。

const webpack = require('webpack');
module.exports = {
  plugins: [
    new webpack.HashedModuleIdsPlugin(),
    new webpack.NamedModulesPlugin()
  ]
};

HappyPack

HappyPack 是一个可以将多个JavaScript 模块编译并行处理的工具。它可以显著加快编译时间。以下是示例代码

-- -------------------- ---- -------
----- --------- - ---------------------
-------------- - -
  ------- -
    ------ --
      ----- --------
      ---- ------------------------
    --
  --
  -------- -
    --- -----------
      --- -----
      -------- --
      -------- ----------------
    --
  -
--

3. 优化输出代码体积

在使用 Webpack 进行开发时，我们总是试图减少输出包含的文件大小。以下是一些有效的方法：

代码分离

代码拆分是Webpack中优化输出代码体积的常用方法之一。它的思想是将代码库拆分成小块。webpack提供了以下几个方式来实现代码分离：

同步代码：使用entry配置来分离代码
异步代码：使用import()方式动态加载

Gzip压缩

Gzip 压缩是将输出代码压缩为更小的体积有效方法之一，同时也可以减少加载时间。可以使用 compression-webpack-plugin 实现

const CompressionWebpackPlugin = require('compression-webpack-plugin');
module.exports = {
  plugins: [
    new CompressionWebpackPlugin()
  ]
};

CDN部署

可以使用静态文件 CDN 部署选项来优化输出代码的大小，这将出站流量减少到最小，从而加速页面加载时间

module.exports = {
  output: {
    publicPath: "https://cdn.example.com/assets/"
  }
};

结论

通过上述三个重要构建性能点，可以让您的Webpack应用性能更好。尝试使用这些技术来提高您的Webpack开发收益！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/676dfe6b82fcee791c6b53bd