详解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基本语法分析说明
Jun 15 Javascript
Jquery实现三层遍历删除功能代码
Apr 23 Javascript
jquery重新播放css动画所遇问题解决
Aug 21 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
Jan 09 Javascript
javascript控制层显示或隐藏的方法
Jul 22 Javascript
基于jquery步骤进度条源码分享
Nov 12 Javascript
jquery输入数字随机抽奖特效的简单实现代码
Jun 10 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
JS打开摄像头并截图上传示例
Feb 18 Javascript
微信小程序之网络请求简单封装实例详解
Jun 28 Javascript
layui前端时间戳转化实例
Nov 15 Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 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
一个用于mysql的数据库抽象层函数库
2006/10/09 PHP
PHP个人网站架设连环讲(一)
2006/10/09 PHP
php 正则表达式小结
2009/08/31 PHP
ThinkPHP CURD方法之limit方法详解
2014/06/18 PHP
PHP创建自己的Composer包方法
2018/04/09 PHP
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
jquery $.each()使用探讨
2013/09/23 Javascript
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
jQuery实现表单步骤流程导航代码分享
2015/08/28 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
JS实现不规则TAB选项卡效果代码
2015/09/16 Javascript
12种JavaScript常用的MVC框架比较分析
2015/11/16 Javascript
JavaScript中 ES6 generator数据类型详解
2016/08/11 Javascript
Webpack打包css后z-index被重新计算的解决方法
2017/06/18 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
2019/11/01 Javascript
详解在Python的Django框架中创建模板库的方法
2015/07/20 Python
Python进阶篇之字典操作总结
2016/11/16 Python
定制FileField中的上传文件名称实例
2017/08/23 Python
python实现定时提取实时日志程序
2018/06/22 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020/01/06 HTML / CSS
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
Stella McCartney官网:成衣、包袋、香水、内衣、童装及Adidas系列
2018/12/20 全球购物
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
乡镇八一建军节活动方案
2014/08/24 职场文书
2014年自愿离婚协议书范本
2014/09/25 职场文书
企业爱心捐款倡议书
2015/04/27 职场文书
美容院管理规章制度
2015/08/05 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS
JavaScript实例 ODO List分析
2022/01/22 Javascript