webpack 性能优化 dll 分包
webpack 性能优化 dll 分包
html-webpack-externals-plugin
DLLPlugin
https://www.webpackjs.com/configuration/
https://webpack.js.org/plugins/dll-plugin/#dllplugin
old
dll 的方式好像在webpack4里面应用的不是很多了,webpack4已经做了优化;我查看了下vue-cli以及create-react-app都抛弃了这个配置,具体原因地址:https://github.com/vuejs/vue-cli/issues/1205
作者回复:
是的,如果项目使用了 Webpack4,确实对 dll 的依赖没那么大,使用 dll 相对来说提升也不是特别明显。
而且有 hard-source-webpack-plugin 可以极大提升二次构建速度。
不过从实际前端工程中来说, dll 还是很有必要掌握的。对于一个团队而言,基本是采用相同的技术栈,要么 React、要么Vue 等等。
这个时候,通常的做法都是把公共框架打成一个 common bundle 文件供所有项目使用。
比如我们团队会将 react、react-dom、redux、react-redux 等等打包成一个公共库。
dll 可以很好的满足这种场景:将多个npm包打成一个公共包。
因此团队里面的分包方案使用 dll 还是很有价值,常见的会从整个工程的角度分为基础包(react、redux等)、业务公共包(所有业务都要用到的监控上报脚本、页面初始化脚本)、某个业务的js。
webpack.dll.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
library: [
'react',
'react-dom'
]
},
output: {
filename: '[name]_[chunkhash].dll.js',
path: path.join(__dirname, 'build/library'),
library: '[name]'
},
plugins: [
new webpack.DllPlugin({
name: '[name]_[hash]',
path: path.join(__dirname, 'build/library/[name].json')
})
]
};
refs
https://time.geekbang.org/course/detail/100028901-116017
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
webpack 性能优化 dll 分包的更多相关文章
- webpack性能优化——DLL
Webpack性能优化的方式有很多种,本文之所以将 dll 单独讲解,是因为 dll 是一种最简单粗暴并且极其有效的优化方式. 在通常的打包过程中,你所引用的诸如:jquery.bootstrap.r ...
- webpack 性能优化小结
背景 如今前端工程化的概念早已经深入人心,选择一款合适的编译和资源管理工具已经成为了所有前端工程中的标配,而在诸多的构建工具中,webpack以其丰富的功能和灵活的配置而深受业内吹捧,逐步取代了gru ...
- webpack性能优化
Webpack优化打包速度以及性能优化 1.跟上技术的迭代(Node.Npm.Yarn) 2.在尽可能少的模块上应用loader 3.Plugin尽可能精简并确保可靠 4.resolve参数合理配置 ...
- Webpack 性能优化 (一)(使用别名做重定向)
前言 Webpack 是 OneAPM 前端技术栈中非常重要的一部分.它非常好用,假设你还不了解它,建议你阅读这篇Webpack 入门指迷,在 OneAPM 我们用它完毕静态资源打包.ES6 代码的转 ...
- webpack 性能优化 -- 待续
文章 这篇文章挺不错的, 各方面优化都提到了, 有空研究下 文章 这个文章提出 , 增量打包用 webpack-watch 会让你打包速度飞快, react不参与打包, 不require, 而是放在 ...
- webpack性能优化-实战
题外话:年初项目重构上线,项目技术栈使用vue+webpack,测试执行整个打包流程需要10分钟,同时又因涉及三个渠道,部署好环境就需半个小时,这严重延误了上线进度,因此提高webpack构建效率,成 ...
- webpack打包优化点
目录 1. noParse 2. 包含和排除目录 3. IgnorePlugin 4. happypack 5. DllPlugin动态链接库 6. 热更新 7. 开发环境 tree-shaking ...
- 浅谈webpack4.0 性能优化(转)
前言:在现实项目中,我们可能很少需要从头开始去配置一个webpack 项目,特别是webpack4.0发布以后,零配置启动一个项目成为一种标配.正因为零配置的webpack对项目本身提供的“打包”和“ ...
- Web 性能优化: 使用 Webpack 分离数据的正确方法
摘要: Webpack骚操作. 原文:Web 性能优化: 使用 Webpack 分离数据的正确方法 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 制定向用户提供文件的最佳方式可能是一 ...
随机推荐
- 转 10 jmeter之动态关联
10 jmeter之动态关联 jmeter中关联是通过之前请求的后置处理器实现的,具体有两种方式:XPath Extractor(一般xml的时候用的多)和正则表达式提取器. 以webtours登 ...
- H3C防火墙开启区域间互访
配置ip和路由以及将端口放至Untrust之后,外网还是不通,需要以下命令 interzone policy default by-priority 或者下面: security-zone intra ...
- Apache环境下强制http跳转至https的配置总结
一. 简单实例介绍一般来说,apache配置好http和https后,如果想要做http强转到https,需要设置url重定向规则,大致需要下面几个步骤即可完成配置: 1)在httpd.conf文件里 ...
- RPM 和YUM总结
RPM RPM命名: 安装 rpm -ihv 其他常用的选项: 1. 重新安装 --replacepkgs (或者 --force ) 2. 不考虑依赖 --nodeps (不推荐) 升级: 查询: ...
- v-show和v-if指令的共同点和不同点?
共同点:都能控制元素的显示和隐藏:不同点:实现本质方法不同,v-show本质就是通过控制css中的display设置为none,控制隐藏,只会编译一次:v-if是动态的向DOM树内添加或者删除DOM元 ...
- 输入DStream之基础数据源以及基于HDFS的实时wordcount程序
输入DStream之基础数据源以及基于HDFS的实时wordcount程序 一.Java方式 二.Scala方式 基于HDFS文件的实时计算,其实就是,监控一个HDFS目录,只要其中有新文件出现,就实 ...
- ubuntu虚拟机重启后进入initramfs的解决办法
问题:windows下使用VMware或者自己安装的ubuntu系统出现,不能正常进入系统,而是进入一个以initramfs开头的命令行界面! 原因:不正常的关闭系统,导致系统文件损坏,/dev/sd ...
- Mac变卡顿,优化性能
当调整窗口大小,同时按住"Option"键,可以从中央调整大小 同时按住"Shift"键时,可以按比例调整大小.同时按住这两个键,那么既成比例,又从中央调整大小 ...
- KVM (虚拟机创建及管理,存储管理)
创建KVM虚拟机 1.图形化界面创建 第一步:查看软件包组 yum grouplist 第二步:下载GUI界面的软件包组 yum groupinstall "Server with GUI& ...
- TCP/IP__TCP协议IP协议&IP地址
IP协议(Internet Protocol) 1. 定位:计算机网络间相互连接进行通信而定义的协议.在因特网中,它是能使连接到网上的所有计算机网络实现相互通信的一套规则,规定了计算机在因特网上进 ...