优化Webpack构建性能的几点建议

Webpack 作为目前最流行的前端构建工具之一,在 vue/react 等 Framework 的生态圈中都占据重要地位。在开发现代 Web 应用的过程中,Webpack 和我们的开发过程和发布过程都息息相关,如何改善 Webpack 构建打包的性能也关系到我们开发和发布部署的效率。

以下是一些关于优化 Webpack 构建性能的几点建议:

一、选择合适的 Devtool 版本

​webpack 的 devtool 配置,决定了在构建过程中怎样生成 sourceMap 文件。通常来说eval的性能最高,但是不能生成的 sourceMap 文件解析出来的代码,和源代码差异较大。 source-map 的性能较差,但是可以生成原始版本的代码。 在大多数 Development 场景下 cheap-module-eval-source-map 是最佳的选择。

下图是各个 Devtool 配置的对比(+号越多,代表速度越快,-号越多,代表速度越慢, o代表中等速度)

注意* : 在 production 配置中,如果需要生成 sourceMap 文件来进行异常分析, 应该使用 hidden-source-map 或者 nosources-source-map, source-map 等配置。并且不要把 sourceMap 文件也放在部署目录下。

二、Build Cache

Webpack 和一些 Plugin/Loader 都有 Cache 选项。开启 Cache 选项,有利用提高构建性能。

​比如:使用 babel-loader 的时候开启 cacheDirectory 选项,会较为明显的提升构建速度

 module: {
    rules: [{
        test: /\.js$/,
        use: ['babel-loader?cacheDirectory'],
        include: path.join(__dirname, 'app')
    }]
 }

三、减少代码体积

  • 使用 CommonsChunksPlugin 提取多个 chunk 之间的通用模块,减少总体的代码体积
  • 把部分依赖转移到 CDN 上,避免在每次编译过程中都由 Webpack 处理
  • 对于支持局部引入的类库,在开发的过程中使用局部引入的方式,避免引入无用的文件

比如 lodash 就支持部分引入:

import isArray from 'lodash/isArray';

参考: [Don't import whole lodash] (https://github.com/lodash/lodash/issues/3450)

​在进行这一优化手段的时候,可以借助可视化工具进行 chunk 体积和内容的分析。方便进一步调整 webpack 的配置。主要有以下两种方法:

1. 使用 webpack 的 profile 命令生成 JSON 文件,并且把 JSON 上传到相应的在线网站进行可视化分析。

```bash
webpack --profile --json > stat.json
```

使用 webpack-visualizer 进行分析:

2. 使用第三方 plugin,在编译过程中进行体积分析,并且以图表方式输出:

推荐使用 webpack-bundle-analyzer:

四、减少目录检索范围

在使用 loader 的时候,通过指定 exclude 和 incude 选项,减少 loader 遍历的目录范围,从而加快 Webpack 编译速度。

比如指定 babel-loader 只处理业务代码:

{
   test: /\.js$/,
   use: ['babel-loader'],
   include: path.join(__dirname, 'app')
}

五、减少检索路径

resolve.alias 可以配置 webpack 模块解析的别名,对于比较深的解析路径,可以对其配置 alias. 可以提升 webpack 的构建速度。

alias: {
  Utilities: path.resolve(__dirname, 'src/utilities/'),
  Templates: path.resolve(__dirname, 'src/templates/')
}

六、使用 DllPlugin/DllReferencePlugin 进行预先构建

​Webpack 的 DllPlugin 和 DllReferencePlugin 是在新版本中推出的 Plugin,其思路就是把改变频率比较小的第三方库等依赖单独打包构建,在打包整个项目的时候,如果解析到了通过 Dll 形式进行打包的依赖,会在正常的打包过程中跳过,同时把对这些依赖的引入导入到 Dll 模块上去。 这样会大大提升在对业务代码进行打包时候的速度。

1. 新建一个单独的 webpack 配置文件,比如 webpack.dll.config.js

2. 在这个配置文件中,使用 webpack DllPlugin 生成 manifest.json 文件和 Dll 模块文件。也可以引入诸如 uglifyPlugin 对第三方依赖进行压缩等处理。

import path from 'path';
import pkg from './package.json';
import webpack from 'webpack';
var vendorPackages = Object.keys(pkg.dependencies);
const config = {
entry: {
     vendor: vendorPackages
     },
output: {
     filename: 'dll.[name].js',
     path: path.resolve(__dirname, 'build', 'dll'),
     library: '[name]'
      },
plugins: [
     new webpack.DllPlugin({
           context: __dirname,
           name: "[name]_[hash]",
           path: path.join(__dirname, "manifest.json"),
     }),
     new webpack.optimize.UglifyJsPlugin({
           sourceMap: true,
           minimize: true,
           cache: true,
           parallel: true
       }),
     ]
}
​   export default config;

3. 在正常的 webpack 配置文件中,使用 webpack DllReferencePlugin 解析上一步生成的 manifest.json

new webpack.DllReferencePlugin({
        context: path.join(__dirname),
        manifest: require('./manifest.json')
})

在具体的使用过成中, 在 Dll 中包含的依赖没有变化的场景下,可以先执行单次 webpack --config webpack.dll.config.js。然后可以多次执行业务代码的构建过程。由于把第三方依赖进行了剥离,业务代码的构建会快很多。

以下是一些关于 Webpack 构建性能的文章:

1):使用 DllPlugin 提升性能

2): PrefetchPlugin 的使用

3): webpack 打包分析与性能优化

4): webpack 使用优化

转载请注明出自:葡萄城控件

相关阅读:

基于低代码平台(Low Code Platform)开发中小企业信息化项目 SoapUI实践:自动化测试、压力测试、持续集成 图表(Chart & Graph)你真的用对了吗?

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏逸鹏说道

Web前端性能优化教程01:减少Http请求和使用内容分发网络

性能黄金法则 只有10%-20%的最终用户响应时间花在接收请求的HTML文档上,剩下的80%-90%时间花在HTML文档所引用的所有组件(图片,script,c...

4397
来自专栏互联网开发者交流社区

SEO-搜索引擎高级搜索指令

1735
来自专栏何俊林

Python爬虫之如何爬取抖音小姐姐的视频

这次爬的是当下大火的APP--抖音,批量下载一个用户发布的所有视频。各位也应该知道,抖音只有移动端,官网打开除了给你个APP下载二维码啥也没有,所以相比爬PC网...

5563
来自专栏张戈的专栏

WordPress强迫症技巧:让文章(ID)地址完美连续(障眼法)

这几天博客一直被 CC 攻击,虽然也没带来什么影响,但是因为多 IP 的并发会导致带宽不够,所以暂时用上了百度云加速。因此,导致之前前台刷新缓存功能也就失效了,...

3334
来自专栏玄魂工作室

[实战]如何在Kali Linux中进行WIFI钓鱼?

文中提及的部分技术可能带有一定攻击性,仅供安全学习和教学用途,禁止非法使用! ? 0x00 实验环境 操作系统:Kali 1.0 (VM) FackAP: ea...

5246
来自专栏c#开发者

使用Web Client Software Factory构建企业级web应用

Web Client Software Factory初始 简介 Web客户端软件工厂( wcsf )提供了一套指导建筑师和开发人员来构建企业级的Web应用...

3514
来自专栏实用工具入门教程

如何部署 NTP 服务器

NTP 全称为 Network Time Protocol ,中文翻译为网络时间协议,1985年就已经被提出,旨在缩短互联网上所有计算机设备与 UTC 的时间差...

5171
来自专栏逸鹏说道

大公司都有哪些开源项目之腾讯

1.WeUI 为微信Web服务量身设计 WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知...

5146
来自专栏zhisheng

Python爬虫入门二之爬虫基础了解

1.什么是爬虫 爬虫,即网络爬虫,大家可以理解为在网络上爬行的一直蜘蛛,互联网就比作一张大网,而爬虫便是在这张网上爬来爬去的蜘蛛咯,如果它遇到资源,那么它就会抓...

3486
来自专栏.Net移动开发

4.6预告先导篇——你们关心的几个问题:关于页、文档、内网推送等

非常感谢大家对Smobiler的支持,从4.6版本的建议征集中,整理了几个大家关注得比较多的问题,在此单独列出答复。

1382

扫码关注云+社区

领取腾讯云代金券