webpack 如何提高页面加载速度？-JavaScript中文网-JavaScript教程资源分享门户

在现代前端开发中，Webpack 是一个非常流行的打包工具，它可以将各种资源文件打包成一个或多个文件，并优化这些文件的大小和加载顺序，从而提高页面的加载速度。本文将会介绍如何使用 Webpack 来提高页面加载速度。

1. 使用 Webpack 优化代码

1.1 使用 Tree Shaking

Tree Shaking 是指将代码中未使用的部分删除，只保留用到的部分，从而减小代码的体积。在 Webpack 中，使用 UglifyJSPlugin 插件可以实现 Tree Shaking。例如：

// webpack.config.js
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
  //...
  optimization: {
    minimizer: [
      new UglifyJSPlugin({
        extractComments: true,
        sourceMap: true,
        uglifyOptions: {
          compress: {
            unused: true,
            dead_code: true,
            warnings: false,
            drop_debugger: true,
            conditionals: true,
            evaluate: true,
            drop_console: true,
            sequences: true,
            booleans: true,
            hoist_funs: true
          },
          output: {
            comments: false
          }
        }
      })
    ]
  }
};

1.2 代码分离

Webpack 提供了代码分离功能，能够将打包后的代码分成多个文件，从而降低单个文件的体积，提高加载速度。使用 SplitChunksPlugin 可以实现代码分离。例如：

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

1.3 按需加载

使用按需加载可以使得应用在用户访问时才加载对应的模块，从而减小加载时间。使用 Webpack 的 lazy loading 特性可以实现按需加载的功能。例如：

// app.js
...
const button = document.createElement('button');
button.innerHTML = 'Load module';
button.onclick = () => {
    import('./lazy').then(lazy => {
        lazy.default();
    }).catch(err => {
        console.log(err);
    });
};
document.body.appendChild(button);
...

2. 图片优化

2.1 图片压缩

在 Webpack 中，使用 image-webpack-loader 插件可以压缩图片，减少图片的体积。例如：

// webpack.config.js
module.exports = {
    module: {
        rules: [{
            test: /\.(png|jpe?g|gif|svg)$/i,
            use: [
                'file-loader',
                {
                    loader: 'image-webpack-loader',
                    options: {
                        mozjpeg: {
                            progressive: true,
                            quality: 65
                        },
                        optipng: {
                            enabled: false,
                        },
                        pngquant: {
                            quality: [0.65, 0.9],
                            speed: 4
                        },
                        gifsicle: {
                            interlaced: false,
                        }
                    }
                }
            ],
        }],
    },
};

2.2 使用 WebP 格式

WebP 是一种由 Google 开发的图片格式，比起 JPEG 和 PNG 格式拥有更高的压缩率，同时保留了更高的图像质量。在 Webpack 中，使用 webp-loader 插件可以将图片转换成 WebP 格式，从而提高网站的加载速度。例如：

// webpack.config.js
const WebpackImageminPlugin = require('imagemin-webpack-plugin').default;
const ImageminWebpWebpackPlugin = require('imagemin-webp-webpack-plugin');
module.exports = {
    plugins: [
        new WebpackImageminPlugin({
            test: /\.(jpe?g|png|gif|svg)$/i,
            pngquant: {
                quality: '40-80'
            },
            imageminOptions: {
                plugins: [
                    ['gifsicle', { interlaced: true }],
                    ['jpegtran', { progressive: true }],
                    ['optipng', { optimizationLevel: 5 }],
                    [
                        'svgo',
                        {
                            plugins: [
                                {
                                    removeViewBox: false,
                                },
                            ],
                        },
                    ],
                ],
            },
        }),
        new ImageminWebpWebpackPlugin({
            config: [{
                test: /\.(jpe?g|png)/,
                options: {
                    quality: 50
                }
            }],
            overrideExtension: true,
            detailedLogs: false,
            silent: false,
            strict: true,
        })
    ],
    module: {
        rules: [{
            test: /\.(png|jpe?g|gif)$/i,
            use: [{
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'images',
                    publicPath: 'images'
                }
            }]
        }],
    },
};

3. 代码缓存

在 Webpack 中，使用缓存可以避免每次都对文件进行完整的打包和处理，从而提高打包速度。使用 Webpack 的缓存机制可以实现代码缓存。例如：

// webpack.config.js
module.exports = {
    //...
    output: {
        filename: 'bundle.[hash].js'
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Caching'
        }),
        new webpack.HashedModuleIdsPlugin(),
    ],
    optimization: {
        runtimeChunk: 'single',
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all'
                }
            }
        }
    }
};

总结

本文介绍了将代码进行优化、图片进行压缩，以及使用按需加载和代码缓存等方式来提高页面的加载速度。当然，以上仅仅是一些基础的 Webpack 优化方式，实际上，Webpack 优化的方式还有很多，需要开发者在实际应用中结合自身需求进行选择和调整。

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

webpack 如何提高页面加载速度？