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

https://gitee.com/geektime-geekbang/geektime-webpack-course/blob/master/code/chapter05/my-project/webpack.dll.js



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


webpack 性能优化 dll 分包的更多相关文章

  1. webpack性能优化——DLL

    Webpack性能优化的方式有很多种,本文之所以将 dll 单独讲解,是因为 dll 是一种最简单粗暴并且极其有效的优化方式. 在通常的打包过程中,你所引用的诸如:jquery.bootstrap.r ...

  2. webpack 性能优化小结

    背景 如今前端工程化的概念早已经深入人心,选择一款合适的编译和资源管理工具已经成为了所有前端工程中的标配,而在诸多的构建工具中,webpack以其丰富的功能和灵活的配置而深受业内吹捧,逐步取代了gru ...

  3. webpack性能优化

    Webpack优化打包速度以及性能优化 1.跟上技术的迭代(Node.Npm.Yarn) 2.在尽可能少的模块上应用loader 3.Plugin尽可能精简并确保可靠 4.resolve参数合理配置 ...

  4. Webpack 性能优化 (一)(使用别名做重定向)

    前言 Webpack 是 OneAPM 前端技术栈中非常重要的一部分.它非常好用,假设你还不了解它,建议你阅读这篇Webpack 入门指迷,在 OneAPM 我们用它完毕静态资源打包.ES6 代码的转 ...

  5. webpack 性能优化 -- 待续

    文章 这篇文章挺不错的, 各方面优化都提到了, 有空研究下 文章 这个文章提出 , 增量打包用 webpack-watch 会让你打包速度飞快,  react不参与打包, 不require, 而是放在 ...

  6. webpack性能优化-实战

    题外话:年初项目重构上线,项目技术栈使用vue+webpack,测试执行整个打包流程需要10分钟,同时又因涉及三个渠道,部署好环境就需半个小时,这严重延误了上线进度,因此提高webpack构建效率,成 ...

  7. webpack打包优化点

    目录 1. noParse 2. 包含和排除目录 3. IgnorePlugin 4. happypack 5. DllPlugin动态链接库 6. 热更新 7. 开发环境 tree-shaking ...

  8. 浅谈webpack4.0 性能优化(转)

    前言:在现实项目中,我们可能很少需要从头开始去配置一个webpack 项目,特别是webpack4.0发布以后,零配置启动一个项目成为一种标配.正因为零配置的webpack对项目本身提供的“打包”和“ ...

  9. Web 性能优化: 使用 Webpack 分离数据的正确方法

    摘要: Webpack骚操作. 原文:Web 性能优化: 使用 Webpack 分离数据的正确方法 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 制定向用户提供文件的最佳方式可能是一 ...

随机推荐

  1. U盘UEFI+GPT模式安装CentOS7.X系统

    1.制作CentOS7安装盘 还是老套路,开局先制作安装盘,UltraISO软碟通,上图   (1) 打开UltraISO软件,选择"文件"-> "打开" ...

  2. Soul 网关 Nacos 数据同步源码解析

    学习目标: 学习Soul 网关 Nacos 数据同步源码解析 学习内容: 环境配置 Soul 网关 Nacos 数据同步基本概念 源码分析 学习时间:2020年1月28号 早7点 学习产出: 环境配置 ...

  3. Connection Pool

    MySQL :: MySQL Connector/NET Developer Guide :: 4.3 Managing a Connection Pool in Connector/NET http ...

  4. (013)每日SQL学习:日期的各种计算

    1.确定两个日期之间的工作日天数 --确定两个日期之间的工作日天数with x0 as (select to_date('2018-01-01','yyyy-mm-dd') as 日期 from du ...

  5. 这几个小技巧,让你书写不一样的Vue!

    前言 最近一直在阅读Vue的源码,发现了几个实战中用得上的小技巧,下面跟大家分享一下. 同时也可以阅读我之前写的Vue文章 vue开发中的"骚操作" 挖掘隐藏在源码中的Vue技巧! ...

  6. P6584 重拳出击

    写在前面 来给 zrm 大佬的题写一篇题解. 这题代码实现难度不高,但是比较锻炼思维,而且应该有不少种解法.着实是一道质量很高的题目. 算法思路 首先呢,显然当小 Z 向当前节点的一棵子树走去时,这棵 ...

  7. Spring Boot:定时任务与图片压缩处理

    一.定时任务 1.创建定时任务 2.@Scheduled 二.图片压缩处理 1.添加thumbnailator依赖 2.创建图片处理类 3.基本使用方法 一.定时任务 项目中可以采用定时任务进行一些操 ...

  8. Hadoop伪分布式环境搭建+Ubuntu:16.04+hadoop-2.6.0

    Hello,大家好 !下面就让我带大家一起来搭建hadoop伪分布式的环境吧!不足的地方请大家多交流.谢谢大家的支持 准备环境: 1, ubuntu系统,(我在16.04测试通过.其他版本请自行测试, ...

  9. linux(3) 处理目录的常用命令

    目录命令总览 ls(英文全拼:list files): 列出目录及文件名 cd(英文全拼:change directory):切换目录 pwd(英文全拼:print work directory):显 ...

  10. labuladong 算法小抄

    <labuladong的算法小抄官方完整版> 本书目前可以手把手带你解决 110 道 LeetCode 算法问题,而且在不断更 新,全部基于 LeetCode 的题目,涵盖了所有题型和技巧 ...