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 Array.prototype.slice使用说明
Oct 11 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
Jun 24 Javascript
javascript运算符——位运算符全面介绍
Jul 14 Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 Javascript
jQuery中的AjaxSubmit使用讲解
Sep 25 Javascript
详解Angular的8个主要构造块
Jun 20 Javascript
Angular 1.x个人使用的经验小结
Jul 19 Javascript
vue小白入门教程
Apr 02 Javascript
node创建Vue项目步骤详解
Mar 06 Javascript
JavaScript实现指定数量的并发限制的示例代码
Mar 10 Javascript
Vue 自适应高度表格的实现方法
May 13 Javascript
Javascript实现鼠标移入方向感知
Jun 24 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 变量未定义等错误的解决方法
2011/01/12 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
PHP MVC框架路由学习笔记
2016/03/02 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
PHP实现上传多文件示例代码
2017/02/20 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
一个对于Array的简单扩展
2006/10/03 Javascript
js下用gb2312编码解码实现方法
2009/12/31 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
2016/08/17 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
2017/08/04 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
Python3中的json模块使用详解
2018/05/05 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
python实发邮件实例详解
2019/11/11 Python
Python如何获取文件指定行的内容
2020/05/27 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
意大利珠宝店:Luxury Zone
2019/01/05 全球购物
95%的面试官都会问到的50道Java线程题,附答案
2012/08/03 面试题
应届生煤化工求职信
2013/10/21 职场文书
综合办公室个人的自我评价
2013/12/22 职场文书
英语商务邀请函范文
2014/01/16 职场文书
学生思想表现的评语
2014/01/30 职场文书
鸿星尔克广告词
2014/03/21 职场文书
行政前台岗位职责
2015/04/16 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
2016年校长新年寄语
2015/08/17 职场文书