cli dll打包 vue_vue-cli3使用 DllPlugin 实现预编译提升构建速度
vue-cli3使用 DllPlugin 实现预编译提升构建速度
发布时间:2020-08-29 11:24:27
来源:脚本之家
阅读:93
在项目打包上有两个目标:减少打包代码体积和加快打包速度
1. 减少打包体积:
(1)对于用的比较少的库,可以去掉(我去掉了jquery以及lodash),用到的地方,参考源码自己写
(2)非用不可的又比较大的库(我这里用了monaco-edit),使用CDN方式引入
打包体积减少的情况下,自然速度也会有所提升
2. 加快打包速度:
我目前做了这些:
(1)vue-cli2升级到vue-cli3,顺便webpack2升级到webpack4,构建速度一下子从3分钟左右提升到不到1分钟(vue-cli3升级过程 https://www.jb51.net/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",
"dll": "webpack -p --progress --config ./webpack.dll.conf.js",
···
},
···
}
· 运行npm run dll命令生成dll
· index.html中加载生成的dll文件
· 以上已经完成预编译并载入;但是一定不要忘记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 实现预编译提升构建速度 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对亿速云网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
cli dll打包 vue_vue-cli3使用 DllPlugin 实现预编译提升构建速度相关推荐
- 使用 HappyPack 和 DllPlugin 来提升你的 Webpack 构建速度
使用 HappyPack 和 DllPlugin 来提升你的 Webpack 构建速度 @(Blogs)[webpack, Front-End] 本文原文发表在:medium.com/@Erichai ...
- dll预编译提高webpack打包速度
一,webpack的dll功能 基于webpack3构建 1.1 dll介绍 我们构建前端项目的时候,往往希望第三方库(vendors)和自己写的代码可以分开打包,因为第三方库往往不需要经常打包更新. ...
- 计算机中丢失api-ms-win-crt-locale,API-MS-WIN一系列丢失DLL打包
API-MS-WIN一系列丢失DLL打包用于解决因VS2015开发的程序导致缺少DLL的问题,因此本包也叫VC2015所有DLL大全,常见错误如下图. DLL文件列表 api-ms-win-core- ...
- asp.net 调用(引用 Native dll 的)C++/CLI dll 的问题及解决
asp.net 调用引用 native dll 的 C++/CLI dll 会报错:说是dll或其依赖项找不到.具体原因在于 IIS 只会从系统路径下去查找 native dll,不会查找 Bin 目 ...
- Unity3D引用dll打包发布的问题及解决
Unity3D引用dll打包发布的问题及解决 参考文章: (1)Unity3D引用dll打包发布的问题及解决 (2)https://www.cnblogs.com/zhuweisky/p/314513 ...
- 模型部署之dll打包
本文主要讲解模型训练好后,怎么封装成dll接口,以供其他语言调用.神经网络框架以ncnn为例,其他框架大体思想都差不多,可以参考本文的思想,或者将模型转成ncnn,直接使用本文的教程亦可. 在打包前, ...
- vue cli项目升级--vue cli3升级到vue cli4
原文网址:vue cli项目升级--vue cli3升级到vue cli4_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍如何升级vue项目的vue cli版本. 官方网址 https://c ...
- 深入浅出的webpack构建工具---DllPlugin DllReferencePlugin提高构建速度(七)
阅读目录 一:什么是DllPlugin 和 DllReferencePlugin?作用是什么? 二:在项目中如何使用 DllPlugin 和 DllReferencePlugin? 三:DllPlug ...
- webpack打包优化_Webpack 构建速度优化
如何输出Webpack构建分析 输出Webpack构建信息的 .json文件: webpack --profile --json > starts.json 说明: --profile:记录构建 ...
最新文章
- oracle oats 安装,Mentor完整培训教程.pdf
- ios转向前端进阶之:html标签类型
- C# 2.0对现有语法的改进
- 项目实战,平均负载过高,最后发现却是这个搞鬼
- ZStack张鑫:面对混合云浪潮 我们主动出击
- 如何用jQuery获得select的值
- 网络协议:TCP拥塞控制
- upupoo设置HTML壁纸,win10 upupoo黑屏怎么解决-解决upupoo设置壁纸黑屏的方法 - 河东软件园...
- MySQL重安装,安装到最后出现Er1045的解决方法
- [转载]想要成为Linux大神,你应该和我一样这样做!
- 话筒在multisim怎么找_基于Multisim软件的调频无线话筒仿真
- 第九届蓝桥杯 b组 明码
- Servlet文件上传的实现
- html用九张图片做出九宫图,九宫切图软件 如何快速把照片做成九宫格切图
- linux erlang版本,技术|如何在 Ubuntu Linux 上安装最新的 Erlang
- 孩子stem教育特殊之处
- html表格标签以及CSS基础
- 按颜色分类:黄色系(Yellow)
- spark-shell计算某大学计算机系的成绩
- 单例设计模式实现总结
热门文章
- javascript基础修炼——手把手教你造一个简易的require.js
- word文档被锁定无法编辑的解决方法
- PowerShell正则替换+批量修改文件名
- day4 java中print,printf,println的区别
- mysql 定时统计_PHP+MySQL定时数据统计优化
- python寻路_【Python】 Numpy极简寻路
- 华为p20Android怎么解开,华为P20如何获得root权限来解决自启动手机应用程序的问题...
- python中again函数怎么用_《“笨方法”学python 》 once again 20170729
- sop4封装尺寸图_「光电封装」 有源光器件的结构和封装
- 内核提速开机linux,Linux操作系统开机启动提速方法介绍。