webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程


Posted in Javascript onJune 10, 2019

DLLPlugin 和 DLLReferencePlugin的使用

DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles,同时还大大提升了构建的速度。

1.首先build文件夹添加----webpack.dll.config.js:

var path = require("path");
var webpack = require("webpack");
module.exports = {
 // 要打包的模块的数组
 entry: {
  vendor: ['vue/dist/vue.esm.js','vue-router']
 },
 output: {
  path: path.join(__dirname, '../static/js'), // 打包后文件输出的位置
  filename: '[name].dll.js',// vendor.dll.js中暴露出的全局变量名。
  library: '[name]_library' // 与webpack.DllPlugin中的`name: '[name]_library',`保持一致。
 },
 plugins: [
  new webpack.DllPlugin({
   path: path.join(__dirname, '.', '[name]-manifest.json'),
   name: '[name]_library', 
   context: __dirname
  }),
 ]
};

2.在package.json的scripts里加上:

"dll": "webpack --config build/webpack.dll.config.js",

3.运行npm run dll 在static/js下生成vendor-manifest.json;

 4.在build/webpack.base.conf.js里加上:

// 添加DllReferencePlugin插件
 plugins: [
  new webpack.DllReferencePlugin({
   context: __dirname,
   manifest: require('./vendor-manifest.json')
  })
 ],

5.然后在index.html中引入vendor.dll.js:

<div id="app"></div>
<script src="./static/js/vendor.dll.js"></script>

至此,配置之后的:

 可以看到npm run build后的时间大幅度减少,在dist打包体积上也比之前的小。在项目优化中,可以很大程度上加快项目的构建速度和减少项目的打包体积。

总结

以上所述是小编给大家介绍的webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 Javascript
javascript读写json示例
Apr 11 Javascript
jquery使用ajax实现微信自动回复插件
Apr 28 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
JavaScript生成.xls文件的代码
Dec 22 Javascript
基于jQuery封装的分页组件
Jun 26 jQuery
浅析从vue源码看观察者模式
Jan 29 Javascript
Vue底层实现原理总结
Feb 17 Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 Javascript
js作用域和作用域链及预解析
Apr 11 Javascript
vue2 中二级路由高亮问题及配置方法
Jun 10 #Javascript
JS中实现一个下载进度条及播放进度条的代码
Jun 10 #Javascript
vuex 中插件的编写案例解析
Jun 10 #Javascript
使用webpack搭建vue项目及注意事项
Jun 10 #Javascript
详解iview的checkbox多选框全选时校验问题
Jun 10 #Javascript
前端路由&amp;webpack基础配置详解
Jun 10 #Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 #Javascript
You might like
发挥语言的威力--融合PHP与ASP
2006/10/09 PHP
php 判断数组是几维数组
2013/03/20 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
2010/03/14 Javascript
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
Script标签与访问HTML页面详解
2014/01/10 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
深入理解jquery中的each用法
2016/12/14 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
Python中的__slots__示例详解
2017/07/06 Python
使用requests库制作Python爬虫
2018/03/25 Python
python tkinter窗口最大化的实现
2019/07/15 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
使用Tkinter制作信息提示框
2020/02/18 Python
解决jupyter notebook import error但是命令提示符import正常的问题
2020/04/15 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
澳大利亚药房在线:ThePharmacy
2017/10/04 全球购物
巴西购物网站:Estrela10
2018/12/13 全球购物
Linux如何修改文件和文件夹的权限
2013/09/05 面试题
2014年社区庆元旦活动方案
2014/03/08 职场文书
共产党员承诺书
2014/03/25 职场文书
《毛主席在花山》教学反思
2014/04/20 职场文书
单方投资意向书
2015/05/11 职场文书
食品安全主题班会
2015/08/13 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL