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 相关文章推荐
jQuery实战之仿淘宝商城左侧导航效果
Apr 12 Javascript
将光标定位于输入框最右侧实现代码
Dec 04 Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
js中方法重载如何实现?以及函数的参数问题
Aug 01 Javascript
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
JS控制图片等比例缩放的示例代码
Dec 24 Javascript
详解Document.Cookie
Dec 25 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
Aug 25 Javascript
浅谈js常用内置方法和对象
Sep 24 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
详解如何用babel转换es6的class语法
Apr 03 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
May 09 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
星际争霸兵种名称对照表
2020/03/04 星际争霸
php xml实例 留言本
2009/03/20 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
PHP flush 函数使用注意事项
2016/08/26 PHP
PHP类的特性实例分析
2016/09/28 PHP
JQuery 小练习(实例代码)
2009/08/07 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
多个datatable共存造成多个表格的checkbox都被选中
2013/07/11 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
2014/01/07 Javascript
JavaScript实现点击文字切换登录窗口的方法
2015/05/11 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
Bootstrap 模态框实例插件案例分析
2016/12/28 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
Vue渲染函数详解
2017/09/15 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
p5.js临摹动态图形实现方法详解
2019/10/23 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
微信小程序实现倒计时功能
2020/11/19 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
详解Python中的多线程编程
2015/04/09 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
Python 网络编程之TCP客户端/服务端功能示例【基于socket套接字】
2019/10/12 Python
关于python中plt.hist参数的使用详解
2019/11/28 Python
pytorch标签转onehot形式实例
2020/01/02 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
2016/04/26 HTML / CSS
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
老公保证书范文
2014/04/29 职场文书
大学应届毕业生求职信
2014/05/24 职场文书
后备干部推荐材料
2014/12/24 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP
php修改word的实例方法
2021/11/17 PHP