webpack性能优化

weixin_44652065

已于 2022-04-22 13:48:42 修改

阅读量3.8k

点赞数 2

分类专栏：前端文章标签： webpack 前端 javascript

于 2022-03-01 22:58:49 首次发布

本文链接：https://blog.csdn.net/weixin_44652065/article/details/123217036

版权

本文主要探讨基于webpack的性能优化，包括加快打包速度和减小打包后文件体积。具体措施包括优化loader配置，使用HappyPack、Dllplugin和hard-source-webpack-plugin加速打包过程；通过resolve和modules选项减少查找模块的时间；借助webpack-bundle-analyzer分析大体积包；通过代码压缩、抽离公共代码、Scope hoisting、tree shaking、清除无用代码以及使用externals配合CDN来减小bundle体积。

摘要由CSDN通过智能技术生成

基于webpack的性能优化

总的来说基于webpack的性能优化主要做两件事：
1、加快webpack打包速度
2、减小webpack打包后的文件体积

一、加快webpack打包速度

1**、优化loader** ：
a、优化loader文件的搜索范围
(主要通过配置test、include、exclude、等字段）
b、在一些性能开销较大的loder之前添加cache-loader，将结果缓存到磁盘中。
默认保存在node_modules/.cache/cache-loader

安装：npm install cache-loader -D
配置：
module.exports = {
//...
module: {
    //项目中,babel-loader耗时比较长，所以我给它配置了`cache-loader`
    rules: [
        {
            test: /\.jsx?$/,
            use: ['cache-loader','babel-loader']
        }
    ]
}}

2、利用HappyPack插件 将loader的同步单线程执行转换为并行的
（node 是单线程运行的、所以webpack 在打包的过程中也是单线程的、特别是在执行loader的时候，长时间的编译任务很多、这样就会导致等待的情况）
3、利用动态链接库Dllplugin、将特定公用的类库提前单独打包、这样可以极大的减少打包类库的次数，只有当类库更新版本才有需要重新打包。
原理：将项目中依赖的基础模块抽离