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 相关文章推荐
JavaScript的Cookies
Jan 16 Javascript
javascript 简练的几个函数
Aug 29 Javascript
javascript(jquery)利用函数修改全局变量的代码
Nov 02 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 Javascript
JavaScript获取图片真实大小代码实例
Sep 24 Javascript
javascript实现回车键提交表单方法总结
Jan 10 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
javascript中关于类型判断的一些疑惑小结
Oct 14 Javascript
微信小程序实现列表页的点赞和取消点赞功能
Nov 02 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
Jun 11 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显示时间常用方法小结
2015/06/05 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
关于js遍历表格的实例
2013/07/10 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
Bootstrap每天必学之附加导航(Affix)插件
2016/04/25 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
Python模块相关知识点小结
2020/03/09 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
python要安装在哪个盘
2020/06/15 Python
解析Python 偏函数用法全方位实现
2020/06/26 Python
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
大学新生军训自我鉴定
2014/03/18 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
Redis sentinel哨兵集群的实现步骤
2022/07/15 Redis