webpack性能优化建议

webpack是一个非常出色的、流行的前端模块打包工具,但由于webpack底层的文件模块依赖分析机制,当用于开发大项目时,打包速度会不是很理想,这时候就需要进行优化。

可以通过下面的这些方法来优化webpack。

1.在项目允许的情况下,更新webpack版本、node版本

通常来说,新版本的webpack、node一般会有性能上的提升,但也有可能存在与现有项目不兼容的情况,所以要根据实际情况来决定是否升级。

2.尽量缩小loader的应用范围,指定include、exclude

const path = require('path');

module.exports = {
    //...
    module: {
    rules: [
        {
        test: /.js$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/,
        loader: 'babel-loader',
        },
    ],
    },
};

3.去除非必要的loader、plugin

启动 loader/plugin 需要耗费一定时间,不必要的可以删除,已经弃用的要及时清除。

4.配置或减少resolve,减少文件查找

module.exports = {
    //...
    resolve: {
    extensions: ['.js', '.json'],
    },
};

5.配置babel-loader缓存目录

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

6.配置DllPlugin

配置DllPlugin将第三方库或一些很少修改的文件进行独立打包,然后直接引用,可以提高项目的编译速度。

// webpack.dll.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: {
    vendor: ['vue', 'element-ui']
    },
    output: {
    path: path.join(__dirname,'dist'),
    filename: '[name].dll.js',
    library: '[name]-[hash]'
    },
    plugins: [
    new webpack.DllPlugin({
        // name 与 output.library 一致
        name: '[name]-[hash]',
        // context 与 DllReferencePlugin 中一致
        context: __dirname,
        path: path.join(__dirname, 'dist', '[name]-manifest.json')
    });
    ]
};
// webpack.config.js
module.exports = {
    // ...
    plugins: [
    new webpack.DllReferencePlugin({
        context: __dirname,
        // manifest 就是之前打包出来的 json 文件
        manifest: require('./dist/vendor-manifest.json'),
    })
    ]
};

7.合理使用多进程

开启多进程打包不是必然能加快打包速度,因为创建进程(600ms左右)、进程通信需要一定的时间开销,开启进程的个数需要合理设置,一般在原先的打包时间较长时配置使用。

module.exports = {
    {
    test: /.js$/,
    use: [
        {
        loader: 'thread-loader',
        options: {
            wordkers: 2
        }
        },
        // ...
    ]
    }
};
此条目发表在JavaScript, Node.js分类目录,贴了, 标签。将固定链接加入收藏夹。