webpack5性能优化

原创已于 2023-10-09 15:17:42 修改 · 922 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #前端 #javascript

于 2023-07-10 21:20:52 首次发布

webpack 专栏收录该内容

3 篇文章

订阅专栏

文章介绍了提高Webpack构建速度的几种方法，包括启用babel-loader的缓存，使用IgnorePlugin忽略无用模块，noParse避免重复打包，利用HappyPack进行多进程打包，ParallelUglifyPlugin多进程压缩JS，以及启用热更新和DllPlugin创建动态链接库以加速前端框架的构建。

webpack构建速度

一、优化babel-loader

注意：开启缓存,配置后打包是就能缓存babel

webpack.common.js文件命中缓存cacheDirectory

Directory/dəˈrektəri/目录;

{
    test: /\.js$/,
    use: ['babel-loader?cacheDirectory'],
    include: srcPath,
    exclude: /node_modules/
},

测试：

打包后的结果:

注意：打包后promise的打包文件会变化文件名

二、IgnorePlugin避免引入无用模块

注意：引入第三方模块，模块可能有许多东西是我们不需要的，而引入时会默认引入所有JS，代码量过大。 IgnorePlugin可以实现忽略文件，不进行打包。

// 忽略 moment 下的 /locale 目录
new webpack.IgnorePlugin({
    resourceRegExp: /\.\/locale/, contextRegExp: /moment/
})

测试不配置IgnorePlugin：

安装插件

sudo cnpm i moment -D

import moment from 'moment'
moment.locale('zh-cn')
console.log('locale',moment.locale());
console.log('data',moment().format('ll'));

运行 npm run build打包代码

注意：打包出来的代码index.js文件有400多kb

测试配置IgnorePlugin：

webpack.prod.js文件的plugins

// 忽略 moment 下的 /locale 目录
new webpack.IgnorePlugin({
    resourceRegExp: /\.\/locale/, contextRegExp: /moment/
})

index.js文件中按需引入

注意：打包出来的index.js文件小了200多kb，因为用了IgnorePlugin所以moment没有进行打包，而少的200kb就是moment的语言包

三、noParse避免重复打包

注意：因为min.js后缀名的文件是已经采用模块化处理过的了，所以不需要进行重新打包。直接用noParse的方式进行过滤掉。

对比、IgnorePlugin和noParse的区别

注意：IgnorePlugin直接不引入，代码中没有。

noParse引入，但是不打包

四、happyPack多进程打包

注意：JS单线程，开启多进程打包。提高构件速度（特别书多核CPU）

安装插件

sudo cnpm i happypack -D

将webpack.common.js文件中关于babel-loader的配置移动到webpack.dev.js文件中去，
webpack.prod.js的module.rules中配置babel-loader

{
    test: /\.js$/,
    use: ['happypack/loader?id=babel'],
    include: srcPath,
    exclude: /node_modules/
},

plugins里new happyPack

new HappyPack({
    // 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
    id: 'babel',
    // 如何处理 .js 文件，用法和 Loader 配置中一样
    loaders: ['babel-loader?cacheDirectory'],
    // ... 其它配置项
}),

测试

执行npm run build

注意：打包完成没什么效果，只是比正常打包快而已，但是打包过程中的代码里会有happy打包的字样出现

五、ParallelUglifyPlugin多进程压缩JS

Parallel/ˈpærəlel/平行的;

uglify混淆

注意：JS是单线程，开启多进程压缩更快。和happypack原理相同

安装插件

sudo cnpm i webpack-parallel-uglify-plugin -D

在webpack.prod.js文件中引入

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

在webpack.prod.js文件中的plugins新建一个

// 使用 ParallelUglifyPlugin 并行压缩输出的 JS 代码
new ParallelUglifyPlugin({
    // 传递给 UglifyJS 的参数
    // （还是使用 UglifyJS 压缩，只不过帮助开启了多进程）
    uglifyJS: {
        output: {
            beautify: false, // 最紧凑的输出
            comments: false, // 删除所有的注释
        },
        compress: {
            // 删除所有的 `console` 语句，可以兼容ie浏览器
            drop_console: true,
            // 内嵌定义了但是只用到一次的变量
            collapse_vars: true,
            // 提取出出现多次但是没有定义成变量去引用的静态值
            reduce_vars: true,
        }
    }
})

测试：

执行npm run build

正常打包出文件，打包程序内代码会出现多个进程一起打包的情况

注意：项目较大、直接打包太慢、开启多进程打包速度会更快

项目较小、直接打包快、开启多进程打包速度会变慢

六、热更新

自动刷新：整个网页全部刷新，速度较慢
自动刷新：整个网页全部刷新，状态会丢失
热更新：新代码生效、网页不刷新，状态不丢失

在webpack.dev.js下引入

const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin');

在webpack.dev.js下修改entry的内容

index: [
    'webpack-dev-server/client?http://localhost:8080/',
    'webpack/hot/dev-server',
    path.join(srcPath, 'index.js')
],

plugins里去new以下

new HotModuleReplacementPlugin()

devServer里

hot: true,

测试：

npm run dev

现在去修改代码

注意：做了热更新后，不去手动刷新，状态不会更改，但是如果手动刷新状态会一起修改

当前文件监听之外的东西就需要进行配置

// 增加，开启热更新之后的代码逻辑
if (module.hot) {
    module.hot.accept(['./math'], () => {
        const sumRes = sum(10, 30)
        console.log('sumRes in hot', sumRes)
    })
}

注意：这样配置里就可以达到不同文件之间也实现热更新

七、DllPlugin动态链接库