extenals 与 dllplugin 该用哪一个？

最新推荐文章于 2022-10-14 10:11:25 发布
最新推荐文章于 2022-10-14 10:11:25 发布
阅读量517 收藏
点赞数 2
分类专栏： webpack 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/github_39506988/article/details/91044437
版权
本文探讨了在项目中如何有效利用Webpack的DLLPlugin和externals特性，通过CDN引入第三方库，减少打包体积，提高加载速度。同时，讨论了在实际应用中遇到的问题及解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

extenals使用方式
extenals(外部扩展) 能够使用cdn引入的都是用cdn引入, 然后在 这里配置，引入库暴露的在全局的方法，并自定义一个名称； 在项目中使用时，使用这个名称，就可以引入库；

dllplugin使用方式
dllplugin 新建一个配置文件先打包部分 变动较少的第三方库， 然后在base配置里面使用DllReferencePlugin引用， webpack会根据manifast.json来排除json里面设置的库

遇到的问题： 当使用dllplugin打包vue， vue-router以及其他的插件时，会导致打包出的vendor包太大，只能分多个dll打包，这样会造成配置文件过于复杂

总结： 优先使用cdn的方式引入第三方库； 使用外部扩展配置名称之后，也可以使用AMD, CMD, Common.js 等规范正常引入配置过的库

Webpack中externals与dll
Always-Learning
12-29 575
externals 为什么需要externals? 有时候我们不希望将某些包进行打包，而是通过CDN链接进行引入，此时我们就可以用到externals。 使用externals的步骤 再webpack.config.js中添加配置项指定要忽略打包的内容 externals: { jquery: 'jQuery' } 在静态文件中通过CDN引入 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"
前端优化 - externals 实现运行时加载依赖
exlinker的博客
01-23 1060
webpack（vue-cli 自带） 中的 externals 配置选项提供了从输出的 bundle 中排除依赖的方法。防止将某些（自己配置）依赖打包，而是在项目运行时（runtime）从外部加载这些依赖。 最直观的：减小 vue 项目 build 后的体积。 配置 index.html 配置项目中的 public/index.html 文件，在其中的 head 标签中添加如下： <!-- 使用CDN的CSS文件 --> <% for (var i in htmlWebpackPlu
webpack编译提速：使用externals和DllPlugin
码飞_CC的博客
02-23 1421
原始未优化（userCenter.bundle.js：7.55 MB)： 使用externals排除对ag-grid-community的打包后(userCenter.bundle.js:5.84 MB): 再通过dll单独打包bizcharts后（userCenter.bundle.js：4.31 MB）：
SPA项目的优化方案（一） 主角：externals 与 Dll
m0_37710874的博客
03-26 886
1.前言 起初，这是很久之前优化的一个vue SPA项目，最近在总结时看到了记录的externals和Dll， 二者都是为了分离模块诞生，那么在效率上各自如何呢，还有分别适合于什么场景呢？ 针对这两个疑惑，写下这篇笔记，顺便记录一下SPA项目的优化方案。 首先看数据 优化前 优化后 ![]() 优化后数据如下 dom树构建完毕时间 页面完全加载时间 打包文件大小 ...
Webpack--externals(外部扩展)详解
weixin_39964419的博客
10-14 1万+
externals用法详解
create-react-app使用dllplugin抽取antd作为公共模块
cs840610862的博客
04-30 3283
首先说说，为什么要使用dllplugin？ 在项目开发中，我们会遇到很多的依赖，体积不小，而且他们都是公共模块，基本上不会有变动，所以考虑是不是可以把这部分公共的模块抽取出来，作为静态的资源，不需要每次都打包这块 虽然有CommonsChunkPlugin插件可以抽取公共模块，但是有如下缺点 每次打包都会重新构建公共模块 只要其中的模块有微笑的变动，打包出来的公共文件就不一样，简单说，换台机器...
『Webpack系列』—— externals用法详解
树上骑个猴的博客
11-01 8129
本文用项目例子是用Vue Cli3搭建的Vue项目 如果小伙伴有做过首屏加载时间优化，应该会遇到chunk-vendors.js这个文件，巨大无比，加载时间超长，是首屏加载时间过长的罪魁祸首之一。 下面通过一个实际的项目来演示，先通过插件webpack-bundle-analyzer来可视化地查看chunk-vendors.js这个文件里面地内容。 npm install webpack-bundle-analyzer --save-dev 在vue.config.js中引入这插件 const Bu.
【webpack5修行之道】第16篇：性能优化-externals
j178202798的博客
06-18 2041
上一篇： 什么是externals？ externals可以告诉webpack不打包资源，从而减少入口文件的大小，如果不打包某个包，又要用到他，这个时候需要从html的script标签进行引入，一般引入的是包的cdn资源 配置externals的方法有多种： 具体查看webpack官网externals，本文仅对常用的三种方法做描述 方法一： 修改webpack.config.js，配置externals const { CleanWebpackPlugin } = require('clea
vue热更新失效_vue-cli3热更新失效
weixin_39621860的博客
12-18 2809
vue-cli3热更新失效问题公司的一个使用vue-cli3搭建的项目一直无法热更新，每次保存代码后都需要手动刷新页面才能看到修改之后的页面，作为一个强迫症晚期患者，那肯定是忍不了。经过个人研究学习，修复好了项目热更新问题，因此写下博客分享给各位。内容都是本人看文档查资料后自己理解的，难免有理解不到位的地方，也欢迎大家指出错误之处，一起学习共同进步。项目开发环境背景我司项目由于相关原因需要前端开发...
webpack优化项目总结
github_39506988的博客
06-06 1279
简述webpack webpack是用来做什么的？ 本质上，webpack是一个现代化javascript应用程序的静态模块打包器（module bundler），是一种实现前端模块化的构建工具， 在前端模块化进程上有着重要的地位 webpack是怎么工作的？ 当webpack处理应用程序时，它会递归地构建一个依赖关系图（dependency graph）， 其中包含应用程序需要的每个模块，然后将...
vue项目打包时配置externals，忽略打包第三方库（前端性能优化方案）
徐忠炜的博客
08-26 1万+
在vue.config.js里这样写 const isProduction = process.env.VUE_APP_MODE === 'production' const cdn = { // 忽略打包的第三方库 /** * externals 对象属性解析： * '包名' : '在项目中引入的名字' * 以element-ui举例 我再main.js里是以 * import ELEMENT from 'element-ui' * Vue.use(ELEMENT, { si
面试官：说说提高webpack的构建速度的手段有哪些？
weixin_44475093的博客
05-10 692
一、背景随着我们的项目涉及到页面越来越多，功能和业务代码也会随着越多，相应的 webpack 的构建时间也会越来越久构建时间与我们日常开发效率密切相关，当我们本地开发启动 devServe...
webpack externals
全栈修炼
08-14 2363
webpack externals详解 在众多的webpack配置教程中，对externals这个配置选项，总是一带而过，把文档中提到的几种方式都复述一遍，但是对于开发者而言，根本没法完全理解。本文试图通过一整篇文章，详细的对externals这个参数进行讲解。 几种用法 externals这个参数的传入形式有多种，但是总结而言，实际上就是array > object，reg，这三种形式都可以传入，前者其实是对后者的包含。 array形式 数组内的每一个元素又可以是多种形式，包括object, reg
利用DllPlugin分割你的第三方库
weixin_34377065的博客
01-08 408
前言 小站利用React全家桶开发，在上线之后，发现第三方bundle（2Mb左右）下载用了近20秒。 最初发现的问题是nginx压缩配置gzip没有添加application/javascript这个MIME类型，但是仍然花了近5秒。 解决过程 初始 起初，我的配置文件(webpack.dll.js)内容如下： 这个配置文件独立于你应用的webpack.dev.js或webpack.prod....
性能优化篇之打包优化-DllPlugin和DllReferencePlugin
superermiao的博客
03-10 3516
DllPlugin和DllReferencePlugin主要功能可以将第三方包单独打包，独立出来。避免进行二次打包。同时也对打包时间进行优化。 我们先使用new BundleAnalyzerPlugin()可以对包进行分析 在项目build.js中打印出时间： 因为是用node进行启动，所以直接webpack中配置stats是不可以的。接下我们看看优化事前的时间和包的分析： 使用dllPlugi...
前端工程化精讲第十一课 编译提效：如何为 Webpack 编译阶段提速？
fegus的博客
08-28 1078
这节课我们整理了 Webpack 构建中编译模块阶段的构建效率优化方案。对于这一阶段的构建效率优化可以分为三个方向：以减少执行构建的模块数量为目的的方向、以提升单个模块构建速度为目的的方向，以及通过并行构建以提升整体构建效率的方向。每个方向都包含了若干解决工具和配置。今天课后的思考题是：你的项目中是否都用到了这些解决方案呢？希望你结合课程的内容，和所开发的项目中用到的优化方案进行对比，查漏补缺。如果有这个主题方面其他新的解决方案，也欢迎在留言区讨论分享。...
Vue 中使用externals和CDN来优化项目的体积
小火车况且况且况且的博客
03-28 7235
Vue 中使用externals和CDN来优化项目的体积 externals是webpack中的一个配置 文档说明 主要是为了防止项目在打包的时候，将一些通过import引入的包也一起打包到bundle中，从而造成打包文件太大。通过运行的时候从外部获取这些包的依赖 在没有使用externals和CDN引入依赖包的时候，打包的项目代码体积比较大 使用之后,指定的依赖项就不会被打包 ...
webpack之externals解析
少油少盐不要辣
07-20 1846
1.是什么 可以指定排除掉不想被webpack打包的模块。一般适用于库的开发。 2.既然模块不被打包，那么项目中的引入语句如何处理呢？ webpack会根据你对模块的配置，将引入语句，编译生成对应环境下引入语句。 3.如何使用 具体参见官方文档，下面说下要点。 如果库的打包为UMD格式的，即：libraryTarget: 'umd'，那么需要配置一个对象。如： externals: { lodash: { commonjs: 'lodash', amd: 'lodash
webpack之externals操作三部曲--正确的姿势
热门推荐
qiqi学习园地
08-31 1万+
排除误区： 看到有人误解externals的作用，所以必须先正确认识externals的作用 1.作用 首先webpack提供这个==externals==选项作用是==从打包的bundle文件中排除依赖==。换句话说就是让在项目中通过import引入的依赖在打包的时候不会打包到bundle包中去，而是通过script的方式去访问这些依赖。 2.怎么用？ 以jque...
vue通过DllPlugin插件优化打包性能，减少打包时间（基于vue-cli）
przlovecsdn的博客
09-18 5053
step1：在build文件夹下新建 webpack.dll.conf.js 文件(即和webpack.base.conf.js同级) const path = require('path') const webpack = require('webpack'); module.exports = { output: { filename: 'dll/[name].dll.js',...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值