脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → webpack实践 DLLPlugin 和 DLLReferencePlugin的使用

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

 更新时间：2019年06月10日 17:23:33   作者：璐松鼠  
这篇文章主要介绍了webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下

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的使用教程，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

您可能感兴趣的文章:

相关文章

  • 微信小程序实现文字跑马灯

    微信小程序实现文字跑马灯

    这篇文章主要为大家详细介绍了微信小程序实现文字跑马灯，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-12-12
  • 深入理解JavaScript事件机制

    深入理解JavaScript事件机制

    事件机制是几乎所有开发语言都有的机制，并不是deviceone的独创，在某些语言称之为消息(Event),有些地方称之为(Message).接下来通过本文给大家介绍JS事件机制的理解 ，需要的朋友一起学习吧
    2023-04-04
  • es7学习教程之Decorators（修饰器）详解

    es7学习教程之Decorators（修饰器）详解

    这篇文章主要给大家介绍了关于es7中Decorators（修饰器）的相关资料，文中通过示例代码给大家介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。
    2017-07-07
  • 详解XMLHttpRequest（二）响应属性、二进制数据、监测上传下载进度

    详解XMLHttpRequest（二）响应属性、二进制数据、监测上传下载进度

    这篇文章主要为大家详细介绍了XMLHttpRequest响应属性、二进制数据、监测上传下载进度,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • 一行代码实现纯数据json对象的深度克隆实现思路

    一行代码实现纯数据json对象的深度克隆实现思路

    今天整理了下资料，分析下为什么一句话可以实现纯数据json对象的深度克隆,感兴趣的朋友可以了解下哦
    2013-01-01
  • JS 可选链的三种形势及好处详解

    JS 可选链的三种形势及好处详解

    这篇文章主要为大家介绍了JS 可选链的三种形势及好处详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-05-05
  • 基于javascript实现浏览器滚动条快到底部时自动加载数据

    基于javascript实现浏览器滚动条快到底部时自动加载数据

    这篇文章主要介绍了基于javascript实现浏览器滚动条快到底部时自动加载数据的相关资料,需要的朋友可以参考下
    2015-11-11
  • JavaScript实现带箭头标识的多级下拉菜单效果

    JavaScript实现带箭头标识的多级下拉菜单效果

    这篇文章主要介绍了JavaScript实现带箭头标识的多级下拉菜单效果,可实现横向与纵向箭头的形式标识选中菜单项位置的功能,涉及javascript针对页面元素位置的判定与样式动态操作技巧,需要的朋友可以参考下
    2015-08-08
  • JavaScript面试题大全(推荐)

    JavaScript面试题大全(推荐)

    在javascript开发中，js面试题是必问的一项，今天小编抽时间给大家整理些js常见的面试题，对js面试题相关知识感兴趣的朋友一起看看吧
    2016-09-09
  • layer弹出层显示在top顶层的方法

    layer弹出层显示在top顶层的方法

    今天小编就为大家分享一篇layer弹出层显示在top顶层的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论