详解webpack提取第三方库的正确姿势


Posted in Javascript onDecember 22, 2017

我们在用webpack打包是时候,常常想单独提取第三方库,把它作为稳定版本的文件,利用浏览缓存减少请求次数。常用的提取第三方库的方法有两种

  1. CommonsChunkPlugin
  2. DLLPlugin

区别:第一种每次打包,都要把第三方库也运行打包一次,第二种方法每次打包只打包项目文件,我们只要引用第一次打包好的第三方压缩文件就行了

CommonsChunkPlugin方法简介

我们拿vue举例

const vue = require('vue')
{
 entry: {
 // bundle是我们要打包的项目文件的导出名字, app是入口js文件
 bundle: 'app',
 // vendor就是我们要打包的第三方库最终生成的文件名,数组里是要打包哪些第三方库, 如果不是在node——modules里面,可以填写库的具体地址
 vendor: ['vue']
 },
 output: {
  path: __dirname + '/bulid/',
 // 文件名称
 filename: '[name].js'
 },
 plugins: {
 // 这里实例化webpack.optimize.CommonsChunkPlugin构造函数
 // 打包之后就生成vendor.js文件
 new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
 }
}

然后打包生成的文件引入到html文件里面

<script src="/build/vendor.js"></script>
 <script src="/build/bundle.js"></script>

DLLPlugin方法简介

首先准备两个文件

  1. webpack.config.js
  2. webpack.dll.config.js

webpack.dll.config.js文件配置如下

const webpack = require('webpack')
const library = '[name]_lib'
const path = require('path')

module.exports = {
 entry: {
 vendors: ['vue', 'vuex']
 },

 output: {
 filename: '[name].dll.js',
 path: 'dist/',
 library
 },

 plugins: [
 new webpack.DllPlugin({
  path: path.join(__dirname, 'dist/[name]-manifest.json'),
  // This must match the output.library option above
  name: library
 }),
 ],
}

然后webpack.config.js 文件配置如下

const webpack = require('webpack')

module.exports = {
 entry: {
 app: './src/index'
 },
 output: {
 filename: 'app.bundle.js',
 path: 'dist/',
 },
 plugins: [
 new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: require('./dist/vendors-manifest.json')
 })
 ]
}

然后运行

$ webpack --config webpack.dll.config.js
$ webpack --config webpack.config.js

html引用方式

<script src="/dist/vendors.dll.js"></script>
<script src="/dist/app.bundle.js"></script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
用jquery生成二级菜单的实例代码
Jun 24 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
Nov 14 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 Javascript
JavaScript中Boolean对象的属性解析
Oct 21 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
js数字舍入误差以及解决方法(必看篇)
Feb 28 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
Mar 01 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
Jul 26 Javascript
微信小程序 checkbox使用实例解析
Sep 09 Javascript
vue 解决computed修改data数据的问题
Nov 06 Javascript
javascript设计模式之装饰者模式
Jan 30 Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 #Javascript
JavaScript伪数组用法实例分析
Dec 22 #Javascript
JavaScript中Object值合并方法详解
Dec 22 #Javascript
Angular简单验证功能示例
Dec 22 #Javascript
Angular实现的table表格排序功能完整示例
Dec 22 #Javascript
详解Vue中localstorage和sessionstorage的使用
Dec 22 #Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 #Javascript
You might like
php下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
php截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
php操作redis缓存方法分享
2015/06/03 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
js实现横向伸展开的二级导航菜单代码
2015/08/28 Javascript
jQuery实现两列等高并自适应高度
2016/12/22 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
JS用最简单的方法实现四舍五入
2019/08/27 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
Python标准库之sqlite3使用实例
2014/11/25 Python
Linux 发邮件磁盘空间监控(python)
2016/04/23 Python
深入理解NumPy简明教程---数组1
2016/12/17 Python
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
简单实现python聊天程序
2018/04/01 Python
Flask框架WTForm表单用法示例
2018/07/20 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
python自动化生成IOS的图标
2018/11/13 Python
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
python开发入门——列表生成式
2020/09/03 Python
Python特殊属性property原理及使用方法解析
2020/10/09 Python
《巨人的花园》教学反思
2014/02/12 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
全陪导游词开场白
2015/05/29 职场文书
三八妇女节主持词
2015/07/04 职场文书
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang