百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 博客教程 > 正文

dll预编译提高webpack打包速度

connygpt 2024-08-20 13:59 5 浏览

我们构建前端项目的时候,往往希望第三方库( vendors )和自己写的代码可以分开打包,因为第三方库往往不需要经常打包更新。对此 Webpack 的文档建议用 CommonsChunkPlugin来单独打包第三方库

Bash
entry: {
 vendor: ["jquery", "other-lib"],
 app: "./entry"
}
new CommonsChunkPlugin({
 name: "vendor",
 // filename: "vendor.js"
 // (Give the chunk a different name)
 minChunks: Infinity,
 // (with more entries, this ensures that no other module
 // goes into the vendor chunk)
})

通常为了对抗缓存,我们会给售出文件的文件名中加入 hash 的后缀——但是——我们编辑了 app 部分的代码后,重新打包,发现 vendor 的 hash 也变化了

这么一来,意味着每次发布版本的时候,vendor代码都要刷新,即使我并没有修改其中的代码。这样并不符合我们分开打包的初衷

  • Dll 是 Webpack 最近新加的功能
  • Dll 这个概念应该是借鉴了 Windows 系统的 dll 。一个 dll 包,就是一个纯纯的依赖库,它本身不能运行,是用来给你的 app 引用的
  • 打包 dll 的时候, Webpack 会将所有包含的库做一个索引,写在一个 manifest 文件中,而引用 dll 的代码( dll user )在打包的时候,只需要读取这个 manifest 文件,就可以了。

优势

  • Dll 打包以后是独立存在的,只要其包含的库没有增减、升级, hash 也不会变化,因此线上的 dll 代码不需要随着版本发布频繁更新
  • App 部分代码修改后,只需要编译 app 部分的代码, dll 部分,只要包含的库没有增减、升级,就不需要重新打包。这样也大大提高了每次编译的速度
  • 假设你有多个项目,使用了相同的一些依赖库,它们就可以共用一个 dll

1.1 使用

首先要先建立一个 dll 的配置文件, entry 只包含第三方库

第一步:新建webpack.dll.conf.js

  • webpack.DllPlugin 的选项中, path 是 manifest 文件的输出路径; name 是 dll 暴露的对象名,要跟 output.library 保持一致
Bash
// build/webpack.dll.conf.js
const path = require('path')
const webpack = require('webpack')
module.exports = {
 entry: {
 // 把这些资源打包成dll,提高编译速度
 react: ['react','react-router-dom','redux','redux-immutable','immutable','react-redux','react-router','redux-logger','redux-thunk','styled-components'],
 ui: ['antd-mobile','antd'],
 others: ['react-icons','axios','clipboard','humps','lodash','md5','moment','normalizr']
 },
 output: {
 path: path.resolve(__dirname, "../dll/"),
 filename: '[name].dll.js',
 library: '[name]'
 },
 plugins: [
 new webpack.DllPlugin({
 path: path.join(__dirname,'../dll/','[name]-manifest.json'),
 name: '[name]'
 }),
 new webpack.optimize.UglifyJsPlugin()
 ]
}

第二步:加一个命令

Bash
// package.json
"scripts": {
 "dll": "webpack --config config/webpack.dll.conf.js"
}

执行 npm run dll

  • 运行 Webpack ,会输出两个文件一个是打包好的 vendor.js ,一个就是 manifest.json,长这样
Bash
{
 "name": "vendor_ac51ba426d4f259b8b18",
 "content": {
 "./node_modules/antd/dist/antd.js": 1,
 "./node_modules/react/react.js": 2,
 "./node_modules/react/lib/React.js": 3,
 "./node_modules/react/node_modules/object-assign/index.js": 4,
 "./node_modules/react/lib/ReactChildren.js": 5,
 "./node_modules/react/lib/PooledClass.js": 6,
 "./node_modules/react/lib/reactProdInvariant.js": 7,
 "./node_modules/fbjs/lib/invariant.js": 8,
 "./node_modules/react/lib/ReactElement.js": 9,
 
 ............

Webpack 将每个库都进行了编号索引,之后的 dll user 可以读取这个文件,直接用 id 来引用

第三步: 在plugins中增加配置

Bash
// build/webpack.prod.conf.js
module.exports = {
 plugins: [
 new webpack.DllReferencePlugin({
 manifest: require('../dll/react-manifest.json')
 }),
 new webpack.DllReferencePlugin({
 manifest: require('../dll/ui-manifest.json')
 }),
 new webpack.DllReferencePlugin({
 manifest: require('../dll/others-manifest.json')
 })
 ]
}

再次执行 npm run build

之前

之后

二、happypack 多线程打包

一般情况下,js是单线程执行的,但 node 不是。利用 node 提供的多线程环境, happypack 是可以多线程打包的。基本上打开官网看了一下readme就可以配置了,特别是我只针对js的编译进行优化,配置还是比较简单的。

https://www.npmjs.com/package/happypack

  • happyPack 把所有串行的东西并行处理,使得 loader 并行处理,较少文件处理时间
Bash
// build/webpack.prod.conf.js
// @file: webpack.config.js
const HappyPack = require('happypack');
 
exports.module = {
 rules: [
 {
 test: /.js$/,
 // 1) replace your original list of loaders with "happypack/loader":
 // loaders: [ 'babel-loader?presets[]=es2015' ],
 use: 'happypack/loader',
 include: [ /* ... */ ],
 exclude: [ /* ... */ ]
 }
 ],
 plugins: [
 // 2) create the plugin:
 new HappyPack({
 // 3) re-add the loaders you replaced above in #1:
 loaders: [ 'babel-loader?presets[]=es2015' ]
 })
 ]
}

这时的编译时间也减小了一些

更多详情 http://blog.poetries.top/2018/11/21/webpack-review/#6-1-%E5%88%86%E6%9E%90%E6%89%93%E5%8C%85%E7%BB%93%E6%9E%9C

三、更多参考

  • 预打包Dll,实现webpack音速编译
  • 利用DllPlugin分割你的第三方库
  • 提高webpack的打包速度:happypack和dll打包

相关推荐

一款简单好用的开源文档管理系统 一款简单好用的开源文档管理系统有哪些

??大家好,我是小编南风吹,每天推荐一个小工具/源码,装满你的收藏夹,让你轻松节省开发效率,实现不加班不熬夜不掉头发!??今天小编推荐一款针对IT团队开发的简单好用的文档管理系统,可以用来储存日常接口...

其他类似GitBook的在线文档创作平台

(GitBook)是一个使用Git和Markdown来构建书籍的现代化的文档平台工具,虽然已经很好了,但由于gitbook有时候由于网络等原因会导致访问书写草稿不是很方便,所以结合群友的实用...

轻松搭建基于 Serverless 的 Go 应用(Gin、Beego 举例)

首先介绍下在本文出现的几个比较重要的概念:函数计算(FunctionCompute):函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传。函数计算准备计算...

使用Golang+Mongodb构建简单的Blog API

(原文作者:KyawMyintThein)本文是关于使用Golang和mongodb构建简单的BlogAPI。它将包括使用Golang(Beego)和Mongodb构建数据库的RestfulA...

使用beego搭建web应用框架 beego框架优缺点

背景最近接手一个go语言开发的应用程序,在部署过程中遇到一系列的问题,因此决定认识下go语言。首先从go的开发框架beego开始吧~实践准备环境首先准备go的环境,我这里使用的是1.21.4的版本...

Golang 入门系列(十三)如何用Beego快速开发web应用

接着之前的内容,前面已经讲过很多Golang的基础语法,mysql的使用,redis的使用,也讲了orm框架,如何创建一个webapi服务等等,感兴趣的可以看看以前的文章。今天要来说一说,如何用be...

Golang 入门系列(十三)介绍一个非常强大的web框架-Beego

接着之前的内容,前面已经讲过很多Golang的基础语法,mysql的使用,redis的使用,也讲了orm框架,如何创建一个webapi服务等等,感兴趣的可以看看以前的文章。今天要来说一说,如何用be...

“铁公鸡”一毛不拔的三个星座 铁公鸡,一毛不拔相当于

说起生活中那些铁公鸡一毛不拔的人,你是不是也能想到几个典型的例子?吝啬到什么程度呢?有的人连买支笔都要掂量半天,哪怕是街边的小贩也要狠命讨价还价。跟他们混在一起,你可能会为一分钱而大吵大闹。这些人就如...

【图像处理识别】数据集合集! 数字图像处理数据集

本文将为您介绍经典、热门的数据集,希望对您在选择适合的数据集时有所帮助。1CNN-ImageProc-Robotics机器人更新时间:2024-07-29访问地址:GitHub描述:通过CNN...

LabVIEW机器学习工具包用户手册 labview工具包有哪些

LabVIEW机器学习工具包用户手册1.介绍机器学习的思想是模仿人类的学习过程,即通过经验获取知识。机器学习算法允?许机器从经验数据中概括规则,并根据学习到的规则对未来的数据进行预测。机器学习工具...

《Advanced Science》!癌症相关成纤维细胞诱导肿瘤微环境重塑

*仅供医学专业人士阅读参考点击右上方“关注”,准时接收每日精彩内容推送。膀胱癌(BC)复发的诊治在临床中较为困难,针对肿瘤微环境(TME)的诊治是一种有前景的疗法。但是对于肿瘤微环境中的单个成分,尤其...

大数据分享:数据可视化常用的后端技术

这篇文章大致讲讲需要用到的后端技术。其实如果只是小数据量,或者是一些小型的项目,研究型的项目,纯前端就可以搞定,利用JS读取数据,JS处理数据。作者:代号22后端无非就是处理数据,提取用户想要的数据。...

一种改进的扩散映射算法 扩散映射图

摘要:扩散映射(DiffusionMaps)是一种基于流形学习的非线性降维方法。基于对扩散映射的研究,提出了一种新的非线性降维算法。根据近邻点分布的不同和模糊聚类原理,新算法定义了扩散映射算法构建...

从一个生活的例子中学习理解大数据分析中的数据降维

今天一起学习在大数据处理中经常遇到的数据降维概念。实际应用中,我们只需要明白核心逻辑,不需要深究背后的数学原理[微笑],因为我们可以直利用Python提供的相应计算库,直接利用这些工具,完成数据降维。...

在大困惑度条件下tSNE降级为PCA tsne 困惑度

本文试图以一种简单的方式来解释一些在生物信息学和计算生物学中使用的神秘分析技术。将详细介绍使用高困惑度的tSNE时会出现一些陷阱,例如将非线性tSNE转换为线性PCA尺寸缩减。为什么要使用具有大困惑度...