使用 Webpack 进行代码优化的 16 个技巧-JavaScript中文网-JavaScript教程资源分享门户

Webpack 是一个前端打包工具，可将多个 JavaScript 文件打包为单个文件。使用 Webpack 进行代码优化可以提高页面加载速度，减少 HTTP 请求次数，降低页面大小。以下是使用 Webpack 进行代码优化的 16 个技巧。

1. 使用 Webpack Bundle Analyzer 插件

使用 Webpack Bundle Analyzer 插件可以可视化 Webpack 打包的结果，帮助开发者找出文件大小、模块依赖等问题。

需要安装插件：

npm install --save-dev webpack-bundle-analyzer

使用如下配置启动 Webpack：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  //...
  plugins: [new BundleAnalyzerPlugin()]
};

2. 压缩代码

使用 Webpack 的 UglifyJS 插件可以将 JavaScript 代码压缩，减少文件大小。

需要安装插件：

npm install --save-dev uglifyjs-webpack-plugin

使用如下配置启动 Webpack：

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  //...
  plugins: [new UglifyJSPlugin()]
};

3. 使用 Scope Hoisting

Webpack 2 之后引入了 Scope Hoisting 技术，可以将模块间的依赖关系简化为一些变量。

module.exports = {
  //...
  plugins: [new webpack.optimize.ModuleConcatenationPlugin()]
};

4. 使用 Tree Shaking

Tree Shaking 技术通过静态分析移除无用代码，减少文件大小。

需要在配置文件中开启 optimization，并将 sideEffects 设置为 false，表示所有代码都是纯函数，没有副作用。

module.exports = {
  //...
  optimization: {
    usedExports: true,
    sideEffects: false
  }
};

5. 按需加载

Webpack 可以将模块拆分为单独的文件，按需加载，减少页面加载时间。需要使用 import() 语句来实现动态加载。

import('./xxx').then((module) => {
  //...
});

6. 预加载

使用 webpackPrefetch 可以在主资源加载完成后预加载相关资源，加快页面加载速度。

import(/* webpackPrefetch: true */ './xxx').then((module) => {
  //...
});

7. 开启 Gzip 压缩

可以在 Web 服务器上启用 Gzip 压缩，减少网络传输的数据量。需要在 Webpack 中设置 compression。

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  //...
  plugins: [new CompressionPlugin()]
};

8. Inline Small Assets

可以将较小的资源内联到 HTML 或 CSS 文件中，减少 HTTP 请求次数。

{
  test: /\.(png|jpg|gif)$/i,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 1024,
        fallback: 'file-loader',
        name: '[name].[ext]',
        outputPath: 'assets'
      }
    }
  ]
}

9. 使用 NamedModulesPlugin

NamedModulesPlugin 可以在开发环境中向控制台输出有改动的模块名称。

module.exports = {
  //...
  plugins: [new webpack.NamedModulesPlugin()]
};

10. 使用 HashedModuleIdsPlugin

HashedModuleIdsPlugin 可以在生产环境中向应用程序添加短哈希值，以便更好地处理缓存机制。

module.exports = {
  //...
  plugins: [new webpack.HashedModuleIdsPlugin()]
};

11. 使用 DllPlugin 和 DllReferencePlugin

DllPlugin 和 DllReferencePlugin 可以将开发和生产之间的公共代码提取为单独的 DLL，加快构建和减小打包文件。

需要先创建一个 webpack.config.dll.js 文件：

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

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

然后启动 Webpack，得到生成的 vendor.dll.js 和 vendor.manifest.json 文件。

接下来在原来的 Webpack 配置文件中添加 DllReferencePlugin：

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./dist/vendor.manifest.json')
    })
  ]
};

12. 使用 ParallelUglifyPlugin

ParallelUglifyPlugin 可以使用多个进程并行压缩代码，提高压缩速度。

const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');

module.exports = {
  //...
  plugins: [
    new ParallelUglifyPlugin({
      cacheDir: true,
      uglifyJS: {},
      sourceMap: true
    })
  ]
};

13. 拆分第三方库

将第三方库拆分为单独的包可以提高构建速度，缩小打包文件。

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

14. 使用 babel-loader 缓存

将 babel 编译器的缓存设置为 true，可以加速编译过程。

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

15. 使用 IgnorePlugin

使用 IgnorePlugin 可以忽略某些文件，加快编译速度。

module.exports = {
  //...
  plugins: [new webpack.IgnorePlugin(/\.\/locale/)]
};

16. 使用 HardSourceWebpackPlugin

HardSourceWebpackPlugin 可以在文件系统中缓存编译后的代码和构建中间文件，以避免重新编译（特别是在多次启动后）而导致的大量静态资源和昂贵的跨系统文件系统操作。

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

module.exports = {
  //...
  plugins: [new HardSourceWebpackPlugin()]
};

总结：

使用 Webpack 进行代码优化可以显著提高页面加载速度，减少 HTTP 请求次数，降低页面大小。本文介绍了 16 个使用 Webpack 进行代码优化的技巧，每个技巧都具有指导意义和深度，同时包含了示例代码。希望能够帮助到正在使用 Webpack 的开发者。

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

使用 Webpack 进行代码优化的 16 个技巧