cli dll打包 vue_5分钟搞定vue-cli3Dll优化

最新推荐文章于 2024-02-27 10:41:34 发布
最新推荐文章于 2024-02-27 10:41:34 发布
阅读量403 收藏 1
点赞数
文章标签： cli dll打包 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39992760/article/details/112024677
版权
本文介绍了在Vue CLI 3项目中使用DLL优化来提高构建速度的方法。通过DllPlugin和DllReferencePlugin，将第三方库如vue、vue-router、axios和vuex预先处理，减少vendor.js大小，加快打包速度。详细步骤包括创建webpack.dll.js配置，更新package.json指令，修改vue.config.js以引入DLL，并展示了优化前后的打包时间对比。
摘要由CSDN通过智能技术生成

在vue项目中因为第三方包，诸如vue，vue-router， axios，vuex都会打包到vendor.js里，vendor.js过大，导致打包速度慢，首页加载慢。

对于打包速度，主要受两点影响：一是处理内容的多少，二是处理步骤的多少。 在实际项目中，第三方库，一般只需要处理一次，不需要每次打包都要处理。

Dll优化

即第三方库预先处理， 实现了拆分 bundles，后续打包不放入vendor.js中，从而大大提升了构建速度。

在实现预处理之前，先介绍下主要用的的两个工具 DLLPlugin 和 DLLReferencePlugin。

DllPlugin

这个插件是在一个额外的独立的 webpack 设置中创建一个只有 dll 的 bundle(dll-only-bundle)。 这个插件会生成一个名为 manifest.json 的文件，这个文件是用来让 DLLReferencePlugin 映射到相关的依赖上去的。

DllReferencePlugin

这个插件是在 webpack 主配置文件中设置的， 这个插件把只有 dll 的 bundle(们)(dll-only-bundle(s)) 引用到需要的预编译的依赖。 通过引用 dll 的 manifest 文件来把依赖的名称映射到模块的 id 上， ，之后再在需要的时候通过内置的 webpack_require 函数来 require

废话不多说，撸起袖子干！！

Dll优化分为两个步骤：

1. 预处理第三方库<

最低0.47元/天 解锁文章
weixin_39992760
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-cli webpack2项目打包优化分享
08-28
本文分享了 Vue-Cli Webpack2 项目打包优化的几种方法，包括模块搜索范围的优化、合理设置 test、include、exclude、替换代码压缩工具、拷贝静态文件、DllPlugin & DllReference 等。这些方法可以大大减少项目的构建...
cli dll打包 vue_webpack进阶——DllPlugin优化打包性能（基于vue-cli）
weixin_39636164的博客
12-29 282
本文主要介绍两个插件：DllPlugin和DllReferencePlugin，后者配合前者使用。Github地址：dll-test介绍：打包会输出一个类dll包(dll包源于windows的动态链接库)，这些代码本身不会执行，主要是提供给我们的业务代码引用。(比如dll中有一个工具方法为时间格式化，这个方法本身并不会执行，但是当我们的业务中需要执行时间格式化时，就会引用这个方法在我们的业务中执行...
PHP 顺时针打印矩阵（螺旋矩阵）
dmedaa的博客
11-05 225
输入一个矩阵，从外向里以顺时针的顺序依次打印出每个数字。例如： 1 2 3 4 5 6 7 8 9 $matrix = array(); $matrix = [[1,2,3],[4,5,6],[7,8,9]]; 按照提议打印结果：1,2,3,6,9,8,7,4,5 可以使用转圈打印方案，即： 1、打印1,2,3 2、打印6,9 3、打印8,7 4、打印4 5、打印5 实现代码： $matrix = [[1,2,.
Vue-cli Dll
郑州彭于晏
03-30 420
vue.config.js /* * @Author: zhang gen yuan * @Date: 2021-03-30 09:27:11 * @Descripttion: */ const webpack = require('webpack') const path = require('path') module.exports = { //二者选其一 chainWebpack: config => { config.plugin('dll-refe
【Vue】Dll plugin使用
及时行乐
04-22 2528
最近工作较忙没时间更新博客，今天在搭建公司新项目，顺便分享一下这个提高编译性能的plugin webpack里面自带dll plugin 项目使用的是vue-cli 3.0构建出来的项目 安装： npm install webpack-cli clean-webpack-plugin --dev 项目根目录新增dll配置文件，用于生成提取出来公共模块 webpack.dll.conf.js co...
cli dll打包 vue_vue-cli3 DllPlugin 提取公用库的方法
weixin_31819459的博客
12-29 434
vue 开发过程中，保存一次就会编译一次，如果能够减少编译的时间，哪怕是一丁点，也能节省不少时间。开发过程中个人编写的源文件才会频繁变动，而一些库文件我们一般是不会去改动的。如果能把这些库文件提取出来，就能减少打包体积，加快编译速度。本文主要讲述在 vue-cli3 中利用 DllPlugin 来进行预编译。1、安装相关插件yarn add webpack-cli@^3.2.3 add-asset...
electron-vuecli:Electron12.0.0 + Vuecli + Javascript + 调用dll + electronUpdater +vue
08-03
vueCli + electron12.0.0 调用C# DLL electron-updater在线更新 项目设置 npm install 为开发编译和热重载 npm run serve 为生产编译和缩小 npm run build Lints 和修复文件 npm run lint 自定义配置 请参阅。 ...
vue-cli2 构建速度优化的实现方法
12-10
对于使用 vue-cli 脚手架创建的前端项目，编译发布几乎是必需操作，有的编译只需要几秒钟，快如闪电，有的却需要好几分钟，慢如蜗牛。如果是线上进行热修复，那更是分秒必争，网页响应的速度直接影响了用户体验，...
详解基于vue-cli优化的webpack配置
01-21
项目采用的是vue全家桶，构建配置都是基于vue-cli去改进的。关于原始webpack配置大家可以看下这篇文章vue-cli#2.0 webpack配置分析,文章基本对于文件每行代码都做了详细的解释，有助于更好的理解webpack。 仔细总结...
初尝Vue3，通过DllPlugin 和 DllReferencePlugin优化打包
一群专业码农的笔记本
11-22 1075
前言 最近尝试了一下vue3.0，搭建起了一个小demo，思考到开发打包和搭建通用化和打包编译效率，今天就记录一下在越来愈多的需求和组件写完后怎么才能提高webpack的build速度和针对当前vue-cli3.x搭建的项目dll文件抽离配置。 什么是DLLPLUGIN 和 DLLREFERENCEPLUGIN 在使用webpack进行打包时候，对于依赖的第三方库，比如vue，vuex等这些不会修改的依赖，我们可以让它和我们自己编写的代码分开打包，这样做的好处是每次更改我本地代码的文件的时候，webp
vue-cli3使用 DllPlugin 实现预编译提升构建速度
12-03
在项目打包上有两个目标：减少打包代码体积和加快打包速度 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）使
vue-lice3项目利用DLLPlugin 和 DLLRe组件，大幅提高wbpack打包速度
博客不一定要自己做
07-03 379
webpack文档 官方描述如下，注意按看usage部分内容 DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles，同时还大大提升了构建的速度。 第一步-新建自定义的webpack打包配置 根目录下新建webpack.dll.conf.js const fs = require('fs') const path = require('path') const webpack = require('webpack') const { CleanWebpackP
使用DllPlugin/DllReferencePlugin/AddAssetHtmlPlugin配置
chunmeizhang_88的博客
05-24 1224
DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles，同时还大大提升了构建的速度。 webpack.dll.js const { resolve } = require('path'); const webpack = require('webpack'); module.exports = { //entry1：打包出来的dll文件将细化到每个入口名称 entry: { jquery: ['jquery'], lodash: ['.
vue打包优化DllPlugin&&DllReferencePlugin
weixin_43790802的博客
03-17 1694
概述： 通过插件预先打包某些依赖（ailabel作为演示依赖），提升项目构建速度。 步骤 1 写预先编译指导文件（webpack.dll.js） let { resolve } = require('path') let WebPack = require('webpack') module.exports = { entry: { dllModules: ['ailabel'] }, output: { filename: '[name].js'
vue-cli3搭建项目之webpack配置
热门推荐
梦行天宇的博客
02-14 6万+
vue-cli3搭建完整项目之webpack配置 ​ 前面篇介绍了项目初始化，下面就要开始对项目webpack进行配置，由于vue-cli3将webpack的基础配置全部内嵌了，这就导致我们初始化项目完成之后发现原先的webpack的config配置全部都消失不见了，那该怎么办呢？别慌，vue-cli3早就考虑到了这一点，它预留了一个vue.config.js的js文件供我们对webpack进行自...
使用DllPlugin和DllReferencePlugin减少vendor.js体积
weixin_34409357的博客
06-28 735
一、打开config下面的index.js 在module.exports里面加入library这段代码，vue、vue-router、vuex、axios等是你想要从vendor.js里面分离出来的插件。我这边分成两个写，是想分离出两个js（vue.dll.js和vueBucket.dll.js） module.exports = { library: { "vue": ...
vue项目webpack打包配置
weixin_43697548的博客
05-06 4584
基于vue/cli3.0+脚手架搭建Vue项目(12) 文章目录基于vue/cli3.0+脚手架搭建Vue项目(12)前言一、webpack配置1.配置vue.config.js2.配置DllPlugin提高构建和打包速度二、打包验证总结 前言 一、webpack配置 1.配置vue.config.js publicPath: './', outputDir: 'dist', assetsDir:"static", indexPath:'index.html', 2.配置DllPlu.
vue3调用sdk开发包的dll方法
最新发布
weixin_64386986的博客
02-27 757
需要使用到nodejs插件ffi-napi、ref-napi、ffi、ref等，这些都属于nodejs插件，作用都是调用C++的， 不支持在浏览器端直接使用，所以需要在nodejs环境下集成API供浏览器使用，安装node插件需要的环境有很多，比如python, VS。安装最高版本的visual studio的c++环境, 安装python3及以上版本。2. 创建项目文件，比如你的项目入口文件叫server.js。2. 在vue中调用nodejs暴露出来的api，传递符合条件的参数类型。
vue-cli使用vue-cli-plugin-dll
qq_44974015的博客
06-04 723
vue-cli使用vue-cli-plugin-dll
vue-cli3项目搭建与优化全攻略
"vue-cli3 从搭建到优化的详细步骤" 在本文中，我们将深入探讨如何使用vue-cli3从零开始搭建一个Vue.js项目，并逐步对其进行优化。Vue CLI 3 是 Vue.js 官方提供的一个命令行工具，它极大地简化了 Vue 项目的初始化...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值