详解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 相关文章推荐
用 javascript 实现的点击复制代码
Mar 24 Javascript
类似CSDN图片切换效果脚本
Sep 17 Javascript
使用UglifyJS合并/压缩JavaScript的方法
Mar 07 Javascript
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 Javascript
JavaScript常用本地对象小结
Mar 28 Javascript
详解jQuery中的empty、remove和detach
Apr 11 Javascript
使用Web Uploader实现多文件上传
Jun 08 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
Jan 29 Javascript
基于Vue实现页面切换左右滑动效果
Jun 29 Javascript
在 React、Vue项目中使用SVG的方法
Feb 09 Javascript
Vuex 使用 v-model 配合 state的方法
Nov 13 Javascript
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
利用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笔记之:AOP的应用
2013/04/24 PHP
php笔记之:php数组相关函数的使用
2013/04/26 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
对联广告js flash激活
2006/10/19 Javascript
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
将HTML格式的String转化为HTMLElement的实现方法
2014/08/07 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
Javascript 对cookie操作详解及实例
2016/12/29 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
2018/06/04 Javascript
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
使用python实现strcmp函数功能示例
2014/03/25 Python
Python3实现生成随机密码的方法
2014/08/23 Python
Python多层装饰器用法实例分析
2018/02/09 Python
python 格式化输出百分号的方法
2019/01/20 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
解决pycharm编辑区显示yaml文件层级结构遇中文乱码问题
2020/04/27 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
DELPHI面试题研发笔试试卷
2015/11/08 面试题
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
食品安全工作实施方案
2014/03/26 职场文书
房产授权委托书范本
2014/09/22 职场文书
第二次离婚起诉书
2015/05/18 职场文书
党小组推荐意见
2015/06/02 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android