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的使用的更多相关文章

  1. webpack 的插件 DllPlugin 和 DllReferencePlugin

    在项目中,引入了比较多的第三方库,导致项目大,而每次修改,都不会去修改到这些库,构建却都要再打包这些库,浪费了不少时间.所以,把这些不常变动的第三方库都提取出来,下次 build 的时候不再构建这些库 ...

  2. webpack实践总结

    一.Loader写法及执行顺序 从webpack2起,loader的格式如下: module: { rules: [ {test: /\.css$/, use: ['style-loader','cs ...

  3. DllPlugin、DllReferencePlugin 可以提取的第三方库列表

    DllPlugin.DllReferencePlugin 可以提取的第三方库列表: 'vue/dist/vue.esm.js', // 'vue/dist/vue.common.js' for web ...

  4. webpack实践(一)- 先入个门

    一.前言   webpack是个啥呢?看官网的这段描述. webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)   在我以前做纯html.css. ...

  5. webpack实践(三)- html-webpack-plugin

    webpack系列博客中代码均在github上:https://github.com/JEmbrace/webpack-practice <webpack实践(一)- 先入个门> < ...

  6. webpack实践(二)- webpack配置文件

    webpack系列博客中代码均在github上:https://github.com/JEmbrace/webpack-practice <webpack实践(一)- 先入个门> < ...

  7. webpack实践(四)- html-webpack-plugin

    webpack系列博客中代码均在github上:https://github.com/JEmbrace/webpack-practice <webpack实践(一)- 先入个门> < ...

  8. vue-cli、webpack提取第三方库-----DllPlugin、DllReferencePlugin

    需要安装的插件有 extract-text-webpack-plugin assets-webpack-plugin clean-webpack-plugin npm install extract- ...

  9. vue+webpack实践

    最近使用了vue来做SPA应用,记一波学习笔记. 使用vue+webpack实现前端模块化. vuejs——轻量.学习成本低.双向绑定.无dom的操作.组件的形式编写 推荐官方文档 vue.js官方文 ...

随机推荐

  1. 洛谷P2590 [ZJOI2008]树的统计 题解 树链剖分+线段树

    题目链接:https://www.luogu.org/problem/P2590 树链剖分模板题. 剖分过程要用到如下7个值: fa[u]:u的父节点编号: dep[u]:u的深度: size[u]: ...

  2. 用一维数组实现栈(C++编程思想 p120)

    1 实现思路 向栈中插入4个元素后的状态 执行过程分析: 2 代码实现 clib.h 接口定义 typedef struct CStashTag { int ele_size; //栈中每个元素的占用 ...

  3. 京东基于Spark的风控系统架构实践和技术细节

    京东基于Spark的风控系统架构实践和技术细节 时间 2016-06-02 09:36:32  炼数成金 原文  http://www.dataguru.cn/article-9419-1.html ...

  4. java TreeSet的排序之自然排序

    TreeSet会调用元素的compareTo(Object o)方法来比较元素之间的大小关系,然后将集合里的元素按升序排列.此时需要排序元素的类必须实现Compareble接口,并覆写其int com ...

  5. js 设置当前时间的后24小时、后一小时等相对时间

    不管是设置相对当前时间有多久时间差的时间,思路:先获取当前时间的时间戳,再根据需求加减时间获得新的时间戳,然后取年月日与时分秒.实例: // 设置默认时间——先转化为毫秒数,加上 24 小时的毫秒数, ...

  6. Linux 内核

    在接口总线领域的最新的一项是外部总线的整个类. 这包括 USB, 固件, 和 IEEE1284(基 于并口的外部总线). 这些接口有些类似于老的非外部的技术, 例如 PCMCIA/CardBus 和 ...

  7. js 处理json

    json 分为两种结构  数组  对象 对象  { } 对象里的键值对  1.键值对之间用冒号链接  2.键必须用“”包裹  3.值如果是字符串  就用“”包裹   如果是数字  则不需要 4.键值对 ...

  8. Vue的数据双向绑定和Object.defineProperty()

    Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...

  9. 使用condition 实现线程顺序执行

    书上给的例子都是ABCABC这种,比较简单,复杂点的如A0B0C0, A0A1A2没有,手动实现下,做个记录 1. A0 A1 A2 A3 public class Demo0 { private s ...

  10. Unitils集成DBUnit、Spring-单元测试(转)

    1.maven-pom文件中引入相关jar包 <!-- Unitils -dbunit.Spring --> <dependency> <groupId>org.u ...