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 相关文章推荐
javascript之对系统的toFixed()方法的修正
May 08 Javascript
Web开发者必备的12款超赞jQuery插件
Dec 03 Javascript
JavaScript初学者建议:不要去管浏览器兼容
Feb 04 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 Javascript
jQuery选择器基础入门教程
May 10 Javascript
源码分析Vue.js的监听实现教程
Apr 23 Javascript
JS实现微信里判断页面是否被分享成功的方法
Jun 06 Javascript
js使用highlight.js高亮你的代码
Aug 18 Javascript
详解使用vue-admin-template的优化历程
May 20 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
JavaScript实现简单计时器
Jun 22 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设计模式中的工厂模式
2008/06/12 PHP
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
详解php命令注入攻击
2019/04/06 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
javascript 正则表达式相关应介绍
2012/11/27 Javascript
onkeydown事件解决按回车键直接提交数据的需求
2013/04/11 Javascript
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
2015/03/05 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
微信小游戏之使用three.js 绘制一个旋转的三角形
2019/06/10 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
layui按条件隐藏表格列的实例
2019/09/19 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
python中property属性的介绍及其应用详解
2019/08/29 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
Python 如何批量更新已安装的库
2020/05/26 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
毕业生造价工程师求职信
2013/10/17 职场文书
成立公司计划书
2014/05/07 职场文书
导游词400字
2015/02/13 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
2014年个人总结范文
2015/03/09 职场文书
总账会计岗位职责
2015/04/02 职场文书
教师节老师寄语
2015/05/28 职场文书
走近毛泽东观后感
2015/06/04 职场文书
给学校的建议书400字
2015/09/14 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
PHP基本语法
2021/03/31 PHP