vue-cli3使用 DllPlugin 实现预编译提升构建速度


Posted in Javascript onApril 24, 2019

在项目打包上有两个目标:减少打包代码体积和加快打包速度

1. 减少打包体积:

(1)对于用的比较少的库,可以去掉(我去掉了jquery以及lodash),用到的地方,参考源码自己写

(2)非用不可的又比较大的库(我这里用了monaco-edit),使用cdn方式引入

打包体积减少的情况下,自然速度也会有所提升

2. 加快打包速度:

我目前做了这些:

(1)vue-cli2升级到vue-cli3,顺便webpack2升级到webpack4,构建速度一下子从3分钟左右提升到不到1分钟(vue-cli3升级过程 https://3water.com/article/160146.htm

(2)使用 DllPlugin 进行预编译,过程如下:

·    npm install webpack-cli --save-d

·    独立出一套webpack配置webpack.dll.conf,用dllPlugin定义要打包的dll文件;这里我在根目录下新建webpack.dll.conf.js  内容如下

const path = require("path");
const webpack = require("webpack");
module.exports = {
 entry: {
 vendor: [
  "vue-router/dist/vue-router.esm.js",
  "vuex/dist/vuex.esm.js",
  "axios"
 ]
 },
 output: {
 path: path.join(__dirname, "public/vendor"),
 filename: "[name].dll.js",
 library: "[name]_[hash]" // vendor.dll.js中暴露出的全局变量名
 },
 plugins: [
 new webpack.DllPlugin({
  path: path.join(__dirname, "public/vendor", "[name]-manifest.json"),
  name: "[name]_[hash]",
  context: process.cwd()
 })
 ]
};

注意;在vue-cli3中一定要把生成的dll放到public中或者自己去配置publicPath (没仔细看文档掉进坑)

·    package.json中定义运行webpack.dll.conf.js的命令

{
···
 "scripts": {
 "serve": "npm link typescript && vue-cli-service serve",
 <strong>"dll": "webpack -p --progress --config ./webpack.dll.conf.js",</strong>
···
 },
···
}

·    运行npm run dll命令生成dll

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

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

·    以上已经完成预编译并载入;但是一定不要忘记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")
  })
 ]
 }
···
}

总结

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

Javascript 相关文章推荐
分享经典的JavaScript开发技巧
Nov 21 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
JavaScript数据结构与算法之链表
Jan 29 Javascript
利用Javascript仿Excel的数据透视分析功能
Sep 07 Javascript
详解Node.js中exports和module.exports的区别
Apr 19 Javascript
vue实现全选、反选功能
Nov 17 Javascript
浅谈angularJS2中的界面跳转方法
Aug 31 Javascript
vue element table 表格请求后台排序的方法
Sep 28 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
Oct 16 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
Oct 23 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
Nov 25 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 Javascript
vue改变对象或数组时的刷新机制的方法总结
Apr 24 #Javascript
详解Vue源码中一些util函数
Apr 24 #Javascript
vue-cli3 DllPlugin 提取公用库的方法
Apr 24 #Javascript
VUE 实现复制内容到剪贴板的两种方法
Apr 24 #Javascript
详解一个小实例理解js原型和继承
Apr 24 #Javascript
微信小程序实现的一键复制功能示例
Apr 24 #Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
Apr 24 #Javascript
You might like
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
php的命名空间与自动加载实现方法
2019/08/25 PHP
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
一个JavaScript的求爱小特效
2014/05/09 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
jquery实现的一个文章自定义分段显示功能
2014/05/23 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
jQuery remove()过滤被删除的元素(推荐)
2017/07/18 jQuery
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
详解Vue的七种传值方式
2021/02/08 Vue.js
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
分享vim python缩进等一些配置
2018/07/02 Python
Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】
2018/12/11 Python
python openpyxl使用方法详解
2019/07/18 Python
Django 创建/删除用户的示例代码
2019/07/24 Python
用什么库写 Python 命令行程序(示例代码详解)
2020/02/20 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
Python可视化工具如何实现动态图表
2020/10/23 Python
一套比较完整的软件测试人员面试题
2012/05/13 面试题
毕业生医学检验求职信
2013/10/16 职场文书
淘宝网店营销策划书
2014/01/11 职场文书
大学生违纪检讨书范文
2015/05/07 职场文书
新郎新娘致辞
2015/07/31 职场文书
Python中的datetime包与time包包和模块详情
2022/02/28 Python
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python