WebPack 构建优化实践：如何使用 Webpack 优化项目打包大小和速度

Webpack 构建优化实践：如何使用 Webpack 优化项目打包大小和速度

在前端开发中，我们经常需要使用 Webpack 进行模块化打包。但是在实际开发中，项目打包时间长，打包出来的文件体积大是常见的问题。那么，如何使用 Webpack 进行优化呢？

本文将深入探讨如何使用 Webpack 优化项目打包大小和速度，并附有实际项目的示例代码，希望能对前端开发同学有所帮助。

一、减小打包体积

1. Tree Shaking

首先介绍的是 Tree Shaking，这是 Webpack 2 版本后新增的特性。其可以通过静态分析代码的方式，找到哪些代码没有被使用到，然后将其删除，从而减小打包体积。

要使用 Tree Shaking，需要满足两个条件：

（1）使用 ES6 模块化的方式，即使用 import/export。

（2）开启 production 模式，即 NODE_ENV=production。

示例代码：

// index.js import { add } from './math.js';

console.log(add(2, 3));

// math.js export const add = (a, b) => { return a + b; };

// webpack.config.js module.exports = { mode: 'production', entry: './index.js', output: { filename: 'bundle.js', }, };

1. Code Splitting

Code Splitting 也是一个常见的优化方法，它可以将代码拆分成多个文件，从而减小打包体积。

Code Splitting 有两种方式：手动和自动。手动需要通过配置插件和使用特定的语法进行操作，自动则是通过 Webpack 自动分析代码进行分割。

以下是手动分割代码的示例代码：

// index.js import('./math.js').then(module => { console.log(module.add(2, 3)); });

// webpack.config.js const path = require('path'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = { mode: 'production', entry: './index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title: 'Webpack', }), ], };

1. 使用 externals 排除不必要的包

有些第三方库可能会被重复打包，这样会导致打包体积变大。我们可以通过使用 externals 配置项，指定这些包不被打包，而是以全局变量的形式引入。

示例代码：

// index.html

// webpack.config.js const path = require('path'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = { mode: 'production', entry: './index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, externals: { react: 'React', 'react-dom': 'ReactDOM', }, plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title: 'Webpack externals', }), ], };

二、提高打包速度

1. 使用多进程/多实例构建

Webpack 4 后已经集成了多进程/多实例构建，可以在 Webpack 配置文件中设置 parallel 参数，开启多进程，从而提高打包速度。此外，也可以使用 HappyPack 等插件进行多线程构建。

示例代码：

// webpack.config.js const os = require('os'); const path = require('path'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = { mode: 'production', entry: './index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /.js$/, exclude: /node_modules/, loader: 'babel-loader', }, ], }, plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title: 'Webpack', }), ], // 开启多进程 parallelism: os.cpus().length, };

1. 合理使用缓存

合理使用缓存也是提高打包速度的重要手段。Webpack 4 默认开启了缓存功能，可以在 node_modules/.cache/webpack 中生成缓存文件，从而提高再次打包的速度。如果仍然觉得打包速度过慢，可以考虑使用 cache-loader 插件进行缓存。

示例配置：

// webpack.config.js const path = require('path'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = { mode: 'production', entry: './index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /.js$/, exclude: /node_modules/, loader: 'cache-loader', }, ], }, plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title: 'Webpack', }), ], };

结语

通过以上优化方法，我们可以在 Webpack 中减小打包体积、提高打包速度。当然，这些方法并不是全部，还有很多其他的优化方法需要探究。希望这篇文章能够对你有所帮助，让你可以更好地使用 Webpack。

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