首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

用Webpack的DllPlugin创建共享库

Webpack的DllPlugin是一个用于创建共享库的插件。它可以将一些不经常变动的代码打包成一个独立的库,以便在开发过程中进行快速的构建和热更新。

具体来说,使用Webpack的DllPlugin可以将一些第三方库或者项目内部的公共代码打包成一个单独的文件,这样在每次构建过程中就不需要重新打包这些代码,而是直接引用已经打包好的共享库。这样可以大大提高构建的速度,特别是在大型项目中。

DllPlugin的使用步骤如下:

  1. 配置webpack.config.js文件,添加DllPlugin插件的配置项。配置项包括entry、output、plugins等参数。其中entry指定需要打包的代码入口文件,output指定打包后的文件输出路径,plugins指定使用的插件及其配置。
  2. 在命令行中执行webpack命令,根据配置文件进行打包。执行完毕后,会生成一个包含共享库的文件。
  3. 在项目的webpack配置文件中,使用DllReferencePlugin插件引用生成的共享库文件。配置项包括context、manifest等参数。其中context指定项目的根目录,manifest指定共享库的清单文件路径。
  4. 在项目中使用共享库。通过在代码中引入共享库,可以直接使用其中的模块和函数,无需再次打包。

使用Webpack的DllPlugin创建共享库的优势包括:

  1. 构建速度快:通过将不经常变动的代码打包成共享库,可以减少每次构建的时间,提高开发效率。
  2. 代码复用:共享库可以被多个项目或者模块引用,提供了代码复用的机制,避免了重复编写相同的代码。
  3. 模块化管理:共享库可以将项目内部的公共代码进行模块化管理,提高代码的可维护性和可扩展性。
  4. 热更新支持:共享库的独立打包使得在开发过程中可以进行热更新,即使修改了项目代码,也无需重新打包共享库。

DllPlugin的应用场景包括:

  1. 多项目共享:当多个项目需要使用相同的第三方库时,可以将这些库打包成共享库,供多个项目引用。
  2. 公共代码提取:将项目内部的公共代码打包成共享库,提供给项目内部的其他模块引用,减少代码冗余。
  3. 第三方库优化:对于一些较大的第三方库,可以将其打包成共享库,以提高构建速度和项目的运行效率。

腾讯云相关产品中,可以使用云函数SCF(Serverless Cloud Function)来部署和运行Webpack的DllPlugin创建的共享库。云函数SCF是一种无服务器的计算服务,可以根据实际需求弹性地运行代码,无需关心服务器的管理和维护。

更多关于腾讯云云函数SCF的信息和产品介绍,可以参考腾讯云官方文档:云函数SCF产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Linux下创建自己共享

Linux操作系统支持函数分为静态和动态,动态又称共享。Linux系统有几个重要目录存放相应函数,如/lib, /usr/lib。 静态函数、动态函数 A....函数创建 静态函数创建 ar rcs libname.a a.o b.o ar:静态函数创建命令 -c :create意思 -r :replace意思,表示当前插入模块名已经在库中存在...对一个做ar s等同于对该做ranlib 动态函数创建 gcc -shared -Wl,-soname,youLibSoname,-o youRealName a.o b.o **linux共享名称分为三段...linkname:一般只包含共享名字,比如:libmycal.so** 产生.o文件命令是: gcc -c -fPIC a.c -fPIC:产生位置无关代码 -c:只编译不链接 创建共享实例...我们先创建一个src和lib文件夹,src下存放源代码,,lib下存放共享 我么在src下写个add.c和sub.c,代码很简单,就是对两个数实现加法和减法运算,代码略过。

2.4K10

webpack dll 提升构建速度

在一个传统共享中,如果两个程序调用同一个子程序,就会出现两份那段代码。让多个应用共享代码切分到一个DLL中,在硬盘上存为一个文件,在内存中使用一个实例(instance)。...DllPlugin 和 DllReferencePlugin 某种方法实现了拆分 bundles,同时还大幅度提升了构建速度。...借助 DLL 思路,webpack 中引入了 DllPlugin 和 DllReferencePlugin ,允许拆分指定第三方包、并创建单独包,生成 manifest.json 二次构建跳过这部分编译...第一步:指定需要拆分包,形成 DLL DllPlugin 第二步:告知webpack,命中 DLL 文件 – DllReferencePlugin Without DllPlugin With...– 引自 autodll-webpack-plugin DllPlugin 此插件用于在单独 webpack 配置中创建一个 dll-only-bundle。

1.1K10
  • Linux下Qt创建共享与链接共享详解

    本次和大家分享是在Ubuntu下使用Qt生成共享以及在Qt中链接共享方法。 共享是在Linux下称呼,在Windows下被称为动态。...之后文章会进行总结说明。 程序平台:Ubuntu14.04、 Qt5.5.1 一、Qt 创建共享 1. 创建类型为Qt工程 ① 新建工程-> Library -> C++ : ?...创建工程添加文件 创建一个继承QWidget应用程序后,在与.pro文件同级目录下添加一个如下目录组织文件: main.cpp ***.pro Lib/ test/ linux_x32/...INCLUDEPATH :指定了编译项目时被搜索到 #include 目录 LIBS :指定了链接到项目中列表 ⑤修改后.pro文件 实际项目中我们可能会用到多个平台,所以一般创建如下...由于以前使用共享遇到过上面的问题,但是在刚刚测试共享时候,为什么没有报错呢?是Qt将生成共享放到Linux默认搜索路径下了么?

    5.7K20

    一波webpack

    2.接下来理解几个基本概念: Entry:入口,webpack执行构建第一步将从Entry开始 output 属性告诉 webpack 在哪里输出它所创建 bundles Module:模块 在webpack...---- 7.最后肯定还是得说一说webpack优化问题了 缩小查找文件范围(配置时exclude和include) 开启打包编译多进程(HappyPack插件) 提取公共代码(CommonsChunkPlugin...插件来实现) 利用动态链接DllPlugin插件来实现) 启用缓存 使用Tree Shaking(需要注意是在使用Tree Shaking前提是,提交给webpackjs代码必须采用了es6...//DllReferencePlugin用于在主要配置文件中引入DllPlugin插件打包好动态链接文件 const DllReferencePlugin = require('webpack/..._dllconfig.js const path = require('path'); //DllPlugin 用于打包出一个个单独动态链接文件 const DllPlugin = require(

    79740

    webpack实战——打包优化【中】

    动态链接DLLPlugin “动态链接(Dynamic Link Library 或者 Dynamic-link Library,缩写为 DLL),是微软公司在微软Windows操作系统中,实现共享函数概念一种方式...今天要介绍主角“DLLPlugin”则借鉴了动态链接思路,对于第三方模块或者一些不常变化模块预先进行编译和打包,然后再项目实际构建过程中直接取用。...不过区别还是有的,DLLPlugin实际生成文件是JS文件而不是动态链接。在打包vendor时候还会附加生成一份vendor模块清单,这份清单将会在工程业务模块打包时起到链接和索引作用。...1 vendor配置 首先需要为动态链接单独创建一个Webpack配置文件,例如:webpack.vendor.config.js,注意要与webpack.config.js区分开来。...小结 本篇从动态链接思想着手,介绍了DLLPlugin与其配套插件DLLReferencePlugin使用,将第三方与一些不常改动模块编译打包,处理为类似于动态链接JS文件,以此来节约服务器资源

    88050

    Webpack DLL

    认识DLL 什么是DLL DLL全称是动态链接(Dynamic Link Library),是为软件在Windows中实现共享函数一种实现方式; 那么webpack中也有内置DLL功能,它指的是可以将可以共享...,并且不经常改变代码,抽取成一个共享; 这个在之后编译过程中,会被引入到其他项目的代码中,减少打包时间; DDL使用分为两步: 第一步:打包一个DLL; 第二步:项目中引入DLL...DLL打包 webpack内置DllPlugin帮助生成DLL文件 webpack.common.js context:执行上下文, entry: key:name(placeholder) value...:要打包包名 output(常规) plugins: DllPlugin name:定义生成dll文件名称 path:生成dll文件文件路径 const path = require("path"...); const {DllPlugin} = require("webpack"); const {merge} = require("webpack-merge") const commonConfig

    1.7K30

    性能优化篇---Webpack构建速度优化

    ;配置前为Time: 11593ms 使用DllPlugin优化 在使用webpack进行打包时候,对于依赖第三方,如react,react-dom等这些不会修改依赖,可以让它和业务代码分开打包...接入需要完成事: 将依赖第三方模块抽离,打包到一个个单独动态链接中 当需要导入模块存在动态链接中时,让其直接从链接中获取 项目依赖所有动态链接都需要被加载 接入工具(webpack...已内置) DllPlugin插件:用于打包出一个个单独动态链接文件; DllReferencePlugin:用于在主要配置文件中引入DllPlugin插件打包好动态链接文件 配置webpack_dll.config.js...构建动态链接 const path = require('path'); const DllPlugin = require('webpack/lib/DllPlugin'); module.exports...,即多个HappyPack示例使用一个共享进程池中子进程去处理任务,以防资源占有过多 代码压缩ParallelUglifyPlugin代替自带 UglifyJsPlugin插件 自带JS压缩插件是单线程执行

    2.2K31

    借助qt creator创建属于自己共享

    Shared Library优势 共享,又称动态或so文件,顾名思义,它可以在可执行文件启动时加载或进程运行期被调用。...使用共享有很多好处,例如(包含但不限于下面提到场景): 1) 减少了依赖共享模块大小,因为它们不必把共享提供功能实现代码静态编译到自己模块代码中。...2) 在同一台机器上运行多个进程会在内存中共享同一份动态,操作系统采用这种内存布局方式可以极大地节省机器内存资源。...由于shared library有其独特场景应用优势,因此*NIX操作系统底层基本都以共享(*.so)形式提供,其实,windows操作系统底层也是以共享(*.dll)形式提供。...这次主要和大家分享Linux下借助qt creator如何创建共享,下次和大家分享在Linux下如何使用共享

    1.1K50

    webpack调优总结

    一、前言 webpack 出现为前端开发带来翻天覆地变化,无论你是 React,Vue 还是 Angular,webpack 都是主流构建工具。...这里用到了 2 个 webpack 插件: DllPlugin(减少每次打包文件数目) HappyPack(并行去执行打包任务) 下面对这两个插件作详细介绍。...DllPlugin dll 是 Dynamic Link Library(动态链接缩写,是 Windows 系统共享函数一种方式。...一是充分利用浏览器缓存,减少网络传输时间。另外就是减少 JS 运行时间,通过 SSR 等方式实现。利用 webpack 能有效抽取出共享资源,提高缓存命中率。...缓存命中方面,可以做到基础模块(React等)和比较少变动模块(组件)分离出来,当组件更新时候依然可以使用基础模块缓存(通过 dll 实现)。

    22020

    前端性能优化篇一:webpack性能优化

    1 合理使用loader include 或 exclude 来帮我们避免不必要转译,优化loader管辖范围,比如 webpack 官方在介绍 babel-loader 时给出示例: module...3 DllPlugin引入 处理第三方姿势有很多,其中,Externals 会引发重复打包问题;而CommonsChunkPlugin 每次构建时都会重新构建一次 vendor;出于对效率考虑...DllPlugin 是基于 Windows 动态链接(dll)思想被创作出来。这个插件会把第三方单独打包到一个文件中,这个文件就是一个单纯依赖。... DllPlugin 处理文件,要分两步走: 基于 dll 专属配置文件,打包 dll 基于 webpack.config.js 文件,打包业务代码 以一个基于 React 简单项目为例,我们...8 按需引入 不知道大家有没有体会到,当我们antd等这种UI组件时候。明明只想要用其中一两个组件,却要把整个组件连同样式一起引进来,就会造成打包后体积突然增加了好几倍。

    2.1K20

    webpack DLL 动态链接

    一个应用程序可使用多个 DLL 文件,一个 DLL 文件也可能被不同应用程序使用,这样 DLL 文件被称为共享 DLL 文件。...— 百度百科 翻译一下,在 webpack动态链接就是:由于每次更改了内容 webpack 都会自动重新编译打包,如果我们把用到的如 react、jquery 这些外部抽离出去,改变文件时候不让...再翻译一下,所谓动态链接就是帮你提升开发效率,使 webpack 在重编译时候能打包更快。...在 webpack 中实现 DLL 主要依赖两个插件 webpack.DllReferencePlugin 和 webpack.DllPlugin,先记好这两个即可。...webpack.DllPlugin 这个插件,它会生成一个名为 manifest.json 文件,你可以理解为就是一张表,我们可以定义依赖,也就是说待会我们用到了 react 时候,告诉 webpack

    2.2K10

    前端性能优化——包体积压缩82%、打包速度提升65%

    为什么没有使用 externals 方式处理组件呢?...externals缺点:直接在html内引入,失去了按需引入功能,只能引入组件完整js和css 组件按需引入原理:最终只引入指定组件和对应样式 elementUI 需要借助 babel-plugin-component...}) ] } } 复制代码 验证插件有效性: 重新打包,原来 407KB 体积压缩为 108KB gZip.png 6、DllPlugin 动态链接 DllPlugin...区别是 DllPlugin 是将依赖单独打包,这样以后每次只构建业务代码,而 externals 是将依赖转化为 CDN 方式引入 当公司没有很好 CDN 资源或不支持 CDN 时,就可以考虑使用...DllPlugin ,替换掉 externals DllPlugin 配置流程大致分为三步: 1)创建 dll.config.js 配置文件 import { DllPlugin } from "webpack

    2.5K30

    webpack优化解决项目体积大、打包时间长、刷新时间长问题!

    2、使用include或者exclude配置,来避免重复打包 在我们日常开发中,我们引入一些插件,类,都是被打包过了,那么我们babel去做编译时候,就需要配置一下,给已经编译过语法剔除掉...首先我们尽量选择官方推荐plugin,这些插件经过了官方测试又可靠性能 其次合理使用这些插件,避免出现引入无用模块和代码, 举一些例子,比如在我们使用moment时候,在打包webpack...true }, 如果小伙伴使用是angular项目可以使用 @angularclass/hmr插件 8、使用DllPlugin插件,优化提高打包时间 当我们使用一些社区比较稳定时候,...首先第一步我们要编写一个dll配置文件,去打包dll文件 const path = require('path') const DllPlugin = require('webpack/lib/DllPlugin..._[name]', }, plugins: [ // 接入 DllPlugin new DllPlugin({ // 动态链接全局变量名称,需要和 output.library

    10.5K41

    优化Webpack构建性能几点建议

    ,减少总体代码体积 把部分依赖转移到 CDN 上,避免在每次编译过程中都由 Webpack 处理 对于支持局部引入,在开发过程中使用局部引入方式,避免引入无用文件 比如 lodash 就支持部分引入.../DllReferencePlugin 进行预先构建 ​Webpack DllPlugin 和 DllReferencePlugin 是在新版本中推出 Plugin,其思路就是把改变频率比较小第三方等依赖单独打包构建...在这个配置文件中,使用 webpack DllPlugin 生成 manifest.json 文件和 Dll 模块文件。也可以引入诸如 uglifyPlugin 对第三方依赖进行压缩等处理。...以下是一些关于 Webpack 构建性能文章: 1):使用 DllPlugin 提升性能 2): PrefetchPlugin 使用 3): webpack 打包分析与性能优化 4): webpack...转载请注明出自:葡萄城控件 相关阅读: 基于低代码平台(Low Code Platform)开发中小企业信息化项目 SoapUI实践:自动化测试、压力测试、持续集成 图表(Chart & Graph)你真的对了吗

    74230

    webpack性能优化之externals 与 DllPlugin

    externals和DllPlugin都是为了分离模块诞生,通过他们可以将一些第三方模块抽离出来,打包时候不需将某些三方一起打包如vue、vue-router 这样提高了编译速度,减少了包大小.../dist/bundle.js"> 通过这种方式实现了第三方外部加载并且我们可以使用import语法 方案二 DllPlugin 使用于将项目依赖基础模块(第三方模块)抽离出来,...然后打包到一个个单独动态链接中。...new webpack.DllPlugin({ name:'_dll_[name]',//manifest.jsonname必须与library相同才能与动态链接建立映射...,所以我们还得配置正式webpack.config 告诉webpack先去动态链接找相关模块,找不到在进行打包 let webpack = require('webpack') ...

    85020

    微前端模块共享你真的懂了吗

    ,可能是一个工具,有可能是一个组件,然后讲其打包成为npm包,然后在每个子应用中都安装该模块依赖,以此达到多个项目复用效果 也就代表每个应用都有相同npm包,本质上没有真正意义上实现模块共享和复用...如果是webpack就是使用插件webpack-bundle-analyzer 阿乐童鞋: 树酱,那移除了这些依赖之后,如何保证应用正常使用?...webpack dll模式下需要配置两份webpack配置,下面是主要两个核心插件 4.1 DllPlugin DllPlugin:在一个独立webpack进行配置webpack.dll.config.js...,目的是为了创建一个把所有的第三方依赖打包到一起bundledll文件里面,同时还会生成一个manifest.json文件,用于:让使用该第三方依赖集合应用配置DllReferencePlugin...联邦模块 Module Federation 模块联邦是 Webpack5 推出一个新重要功能,可以真正意义上实现让跨应用间做到模块共享,解决了从前 NPM 公共包方式共享不便利,同时也可以作为微前端落地方案

    2.7K10

    webpack高阶使用

    optimization: { splitChunks: { chunks: 'all' } } }; splitChunks 插件会自动识别项目中共享模块,并将它们提取到一个独立代码块中...以下是一些常见插件: HtmlWebpackPlugin:简化 HTML 文件创建,可以自动生成 HTML 并自动引入打包后资源 CleanWebpackPlugin:在每次构建前清理输出目录,确保构建产物干净整洁...DefinePlugin:用于在编译时创建全局常量,方便在代码中直接使用 插件使用方法是在 Webpack 配置对象 plugins 属性中添加相应插件实例。...构建性能优化 以下是一些建议,以提高 Webpack 构建性能: 使用 DllPlugin 和 DllReferencePlugin:这两个插件可以将第三方预先打包,减少构建时间。...将第三方单独打包成一个 DLL 文件,并在主配置中引用,从而避免每次构建时都重新打包这些

    8610
    领券