webpack4 的优化措施-JavaScript中文网-JavaScript教程资源分享门户

前言

随着前端技术不断发展和应用场景的增加，前端项目越来越复杂。Webpack 作为一个现代化的模块打包工具，能够帮助我们处理前端项目中的各种依赖，优化网络请求和性能效率。当前版本的 Webpack 4 提供了更多的优化措施，使得我们能够更加高效地完成前端项目开发。本文将会介绍几种常用的优化措施。

优化措施

1. 使用 Tree Shaking

Tree Shaking 是指在打包过程中能够剔除无用代码的技术。在 Webpack 4 中，Tree Shaking 已经默认开启，我们只需要在代码中使用 ES6 的模块化语法，webpack 就可以自动进行 Tree Shaking 的操作，减小打包文件的体积。

import { a } from './module.js';
console.log(a);

上述代码中，如果 module.js 之中除了 a 之外还有其他的方法和属性没有使用到，那么在打包过程中，webpack 就会自动将其剔除，从而减小打包后文件的大小。

2. 使用 splitChunksPlugin 进行代码分割

代码分割可以将一个大的打包文件进行拆分，使得文件更小，减少加载时间，提高用户体验。在 Webpack 4 中，使用 SplitChunksPlugin 插件可以进行代码分割。

optimization: {
    splitChunks: {
        chunks: 'all',
        name: 'vendors',
    },
}

上述代码中的配置，表示对于所有的 chunk 进行代码分割，生成一个新的 chunk，命名为 vendors。同时还可以使用 cacheGroups 配置来进行更加详细的控制。

3. 懒加载

懒加载是指在页面需要时才加载相应的文件或模块，以减小页面的加载时间和提高用户体验。WebPack 4 中，借助于 import() 函数和动态 import，我们可以很方便地实现懒加载。

button.onclick = () => {
    import('./module.js').then((module) => {
        const { a } = module;
        console.log(a);
    });
};

上述代码中，点击按钮时，会加载 module.js，而不是在页面一开始就加载。这种懒加载的方式，可以帮助我们优化页面加载时间，提高用户体验。

4. 使用 MiniCssExtractPlugin 将 CSS 提取成单独的文件

在前端项目中，CSS 代码通常都写在文件中，并在 HTML 页面中进行引用。这样在打包后，CSS 代码会和 JS 代码混在一起，不利于缓存和管理。在 Webpack 4 中，使用 MiniCssExtractPlugin 插件可以将 CSS 代码提取成单独的文件。这样可以将 CSS 和 JS 进行分离，提高代码的可读性和维护性。

// javascriptcn.com 代码示例
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
        ],
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
        }),
    ],
};

上述代码中，使用 MiniCssExtractPlugin 插件，将 CSS 提取成单独的文件，在打包后生成一个 xxx.css 文件。

总结

WebPack 4 提供了许多优化措施，使得我们能够更加高效地完成前端项目开发。在实际的项目中，我们可以根据具体的情况，选择合适的优化措施，并灵活组合使用，以实现更好的效果。

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