1、使用背景：

前端框架如vue react，它们体积大，构建慢
版本较稳定，不常升级版本
所以同一个版本只构建一次即可，不用每次都重新构建

webpack已经内置DllPlugin支持，不用下载插件

通过DllPlugin打包出的dll文件
通过DllRefrencePlugin使用dll文件

DllPlugin不适用于生产环境。

2、在build文件夹中新建一个webpack.dll.js文件

const path = require('path')
const DllPlugin = require('webpack/lib/DllPlugin')
const { srcPath, distPath } = require('./paths')module.exports = {mode: 'development',// JS 执行入口文件entry: {// 把 React 相关模块的放到一个单独的动态链接库react: ['react', 'react-dom']},output: {// 输出的动态链接库的文件名称，[name] 代表当前动态链接库的名称，// 也就是 entry 中配置的 react 和 polyfillfilename: '[name].dll.js',// 输出的文件都放到 dist 目录下path: distPath,// 存放动态链接库的全局变量名称，例如对应 react 来说就是 _dll_react// 之所以在前面加上 _dll_ 是为了防止全局变量冲突library: '_dll_[name]',},plugins: [// 接入 DllPluginnew DllPlugin({// 动态链接库的全局变量名称，需要和 output.library 中保持一致// 该字段的值也就是输出的 manifest.json 文件 中 name 字段的值// 例如 react.manifest.json 中就有 "name": "_dll_react"name: '_dll_[name]',// 描述动态链接库的 manifest.json 文件输出时的文件名称path: path.join(distPath, '[name].manifest.json'),}),],
}

1、mode: ‘development’,

为了提高构建速度，一般针对开发环境要打包dll，生产环境不用这个

2、入口

3、在package.json

在 "scripts"中添加
“dll”: “webpack --config build/webpack.dll.js”
然后运行npm run dll

4、使用

html引入

webpack.dev.js中插件

 new DllReferencePlugin({// 描述 react 动态链接库的文件内容manifest: require(path.join(distPath, 'react.manifest.json')),}),

DllPlugin动态链接库插件相关推荐

（十）webpack 和 babel
webpack 和 babel webpack 面试题基本配置拆分配置和merge 启动本地服务处理ES6 处理样式处理图片模块化总结高级配置多入口抽离css文件抽离公共代码懒加 ...
弄懂webpack，只要看这一片就够了（文末有福利）
什么是webpack webpack是什么,官网中是这么说的. 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webp ...
新彩虹世界密码系统是多少_希望最近的世界密码日是我们需要的最后一个
新彩虹世界密码系统是多少 It has become a cliché because - as is the case with most clichés - it's true. You don' ...
深入浅出的webpack构建工具---DllPlugin DllReferencePlugin提高构建速度(七)
阅读目录一:什么是DllPlugin 和 DllReferencePlugin?作用是什么? 二:在项目中如何使用 DllPlugin 和 DllReferencePlugin? 三:DllPlug ...
支持插件的消息中间件【msg broker with plugin】 - 知然 - 博客园
支持插件的消息中间件[msg broker with plugin] - 知然 - 博客园支持插件的消息中间件[msg broker with plugin] 支持插件的消息中间件 msg brok ...
进击webpack4 （优化篇）
进击webpack 4 (基础篇一) 进击webpack4 (基础篇二:配置一) 进击webpack4 (基础篇三:配置二) 不解析不依赖第三方模块的模块 noParse 有一些第三方模块,它本身 ...
【Vue】Vue1.0+Webpack1+Gulp项目升级构建方案的踩坑路
最近半年在维护公司的一个管理后台项目,搭建之初的技术栈比较混乱,构建方案采用了Gulp中调用Webpack的方式,Gulp负责处理.html文件,Webpack负责加载.vue..js等.而在这一套构 ...
webpack优化相关操作
1.缩小文件搜索的范围 • 优化loader配置尽量精确使用 include 只命中需要的文件. module.exports = { module: { rul ...
趁webpack5还没出，先升级成webpack4吧
上一次将webpack1升级到3,也仅是半年前,前端工具发展变化太快了,如今webpack4已经灰常稳定,传说性能提升非常高,值得升级. 一直用着的webpack3越来越慢,一分多钟的编译时间简直不 ...

DllPlugin动态链接库插件

1、使用背景：

2、在build文件夹中新建一个webpack.dll.js文件

1、mode: ‘development’,

2、入口

3、在package.json

4、使用

DllPlugin动态链接库插件相关推荐

最新文章

热门文章