vue-cli3 DllPlugin 提取公用库的方法


Posted in Javascript onApril 24, 2019

vue 开发过程中,保存一次就会编译一次,如果能够减少编译的时间,哪怕是一丁点,也能节省不少时间。开发过程中个人编写的源文件才会频繁变动,而一些库文件我们一般是不会去改动的。如果能把这些库文件提取出来,就能减少打包体积,加快编译速度。本文主要讲述在 vue-cli3 中利用 DllPlugin 来进行预编译。

1、安装相关插件

yarn add webpack-cli@^3.2.3 add-asset-html-webpack-plugin@^3.1.3 clean-webpack-plugin@^1.0.1 --dev

2、编写配置文件

在项目根目录下新建 webpack.dll.conf.js,输入以下内容。

const path = require('path')
const webpack = require('webpack')
const CleanWebpackPlugin = require('clean-webpack-plugin')

// dll文件存放的目录
const dllPath = 'public/vendor'

module.exports = {
 entry: {
  // 需要提取的库文件
  vendor: ['vue', 'vue-router', 'vuex', 'axios', 'element-ui']
 },
 output: {
  path: path.join(__dirname, dllPath),
  filename: '[name].dll.js',
  // vendor.dll.js中暴露出的全局变量名
  // 保持与 webpack.DllPlugin 中名称一致
  library: '[name]_[hash]'
 },
 plugins: [
  // 清除之前的dll文件
  new CleanWebpackPlugin(['*.*'], {
   root: path.join(__dirname, dllPath)
  }),
  // 设置环境变量
  new webpack.DefinePlugin({
   'process.env': {
    NODE_ENV: 'production'
   }
  }),
  // manifest.json 描述动态链接库包含了哪些内容
  new webpack.DllPlugin({
   path: path.join(__dirname, dllPath, '[name]-manifest.json'),
   // 保持与 output.library 中名称一致
   name: '[name]_[hash]',
   context: process.cwd()
  })
 ]
}

3、生成 dll

在 package.json 中加入如下命令

"scripts": {
  ...
  "dll": "webpack -p --progress --config ./webpack.dll.conf.js"
},

控制台运行

yarn run dll

4、忽略已编译文件

为了节约编译的时间,这时间我们需要告诉 webpack 公共库文件已经编译好了,减少 webpack 对公共库的编译时间。在项目根目录下找到 vue.config.js ( 没有则新建 ),配置如下:

const webpack = require('webpack')
module.exports = {
  ...
  configureWebpack: {
    plugins: [
     new webpack.DllReferencePlugin({
      context: process.cwd(),
      manifest: require('./public/vendor/vendor-manifest.json')
     })
    ]
  }
}

5、index.html 中加载生成的 dll 文件

经过上面的配置,公共库提取出来了,编译速度快了,但如果不引用生成的 dll 文件,网页是不能正常工作的。

打开 public/index.html,插入 script 标签。

...
<script src="./vendor/vendor.dll.js"></script>

到此公用库提取完成,但总觉得最后一部手工插入 script 不太优雅,下面介绍下如何自动引入生成的 dll 文件。

打开 vue.config.js 在 configureWebpack plugins 节点下,配置 add-asset-html-webpack-plugin

const path = require('path')
const webpack = require('webpack')
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
module.exports = {
  ...
  configureWebpack: {
    plugins: [
     new webpack.DllReferencePlugin({
      context: process.cwd(),
      manifest: require('./public/vendor/vendor-manifest.json')
     }),
     // 将 dll 注入到 生成的 html 模板中
     new AddAssetHtmlPlugin({
      // dll文件位置
      filepath: path.resolve(__dirname, './public/vendor/*.js'),
      // dll 引用路径
      publicPath: './vendor',
      // dll最终输出的目录
      outputPath: './vendor'
     })
    ]
  }
}

总结

以上所述是小编给大家介绍的vue-cli3 DllPlugin 提取公用库的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery如何判断某元素是否具备指定的样式
Nov 05 Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 Javascript
JavaScript获取两个数组交集的方法
Jun 09 Javascript
如何使用Bootstrap创建表单
Mar 29 Javascript
老生常谈angularjs中的$state.go
Apr 24 Javascript
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
微信小程序-滚动消息通知的实例代码
Aug 03 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 Javascript
js正则相关知识点专题
May 10 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
Dec 25 Javascript
微信小程序批量上传图片到七牛(推荐)
Dec 19 Javascript
VUE 实现复制内容到剪贴板的两种方法
Apr 24 #Javascript
详解一个小实例理解js原型和继承
Apr 24 #Javascript
微信小程序实现的一键复制功能示例
Apr 24 #Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
Apr 24 #Javascript
解决vue 单文件组件中样式加载问题
Apr 24 #Javascript
vue router 用户登陆功能的实例代码
Apr 24 #Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 #Javascript
You might like
PHP 面向对象实现代码
2009/11/11 PHP
php程序的国际化实现方法(利用gettext)
2011/08/14 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
php实现文章置顶功能的方法
2016/10/20 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
用javascript做拖动布局的思路
2008/05/31 Javascript
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
基于jQuery试卷自动排版系统
2010/07/18 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
2010/12/15 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
pytyon 带有重复的全排列
2013/08/13 Python
Python的装饰器使用详解
2017/06/26 Python
django创建自定义模板处理器的实例详解
2017/08/14 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
详解使用Python下载文件的几种方法
2019/10/13 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
相亲大会策划方案
2014/06/05 职场文书
工会优秀工作者事迹
2014/08/17 职场文书
幼儿园小班开学寄语
2015/05/27 职场文书
师范生小学见习总结
2015/06/23 职场文书
小学体育教学随笔
2015/08/14 职场文书