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

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

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",
 <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 实现预编译提升构建速度 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • vue-cli3 DllPlugin 提取公用库的方法

    vue 开发过程中,保存一次就会编译一次,如果能够减少编译的时间,哪怕是一丁点,也能节省不少时间.开发过程中个人编写的源文件才会频繁变动,而一些库文件我们一般是不会去改动的.如果能把这些库文件提取出来,就能减少打包体积,加快编译速度.本文主要讲述在 vue-cli3 中利用 DllPlugin 来进行预编译. 1.安装相关插件 yarn add webpack-cli@^3.2.3 add-asset-html-webpack-plugin@^3.1.3 clean-webpack-plugin

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

    在项目打包上有两个目标:减少打包代码体积和加快打包速度 1. 减少打包体积: (1)对于用的比较少的库,可以去掉(我去掉了jquery以及lodash),用到的地方,参考源码自己写 (2)非用不可的又比较大的库(我这里用了monaco-edit),使用cdn方式引入 打包体积减少的情况下,自然速度也会有所提升 2. 加快打包速度: 我目前做了这些: (1)vue-cli2升级到vue-cli3,顺便webpack2升级到webpack4,构建速度一下子从3分钟左右提升到不到1分钟(vue-cli

  • JDBC之PreparedStatement类中预编译的综合应用解析

    预编译的优点1.PreparedStatement是预编译的,对于批量处理可以大大提高效率. 也叫JDBC存储过程. 2.使用 Statement 对象.在对数据库只执行一次性存取的时侯,用 Statement 对象进行处理.PreparedStatement 对象的开销比Statement大,对于一次性操作并不会带来额外的好处. 3.statement每次执行sql语句,相关数据库都要执行sql语句的编译,preparedstatement是预编译得,   preparedstatement支

  • Vue CLI3 如何支持less的方法示例

    本文介绍了Vue CLI3 如何支持less的方法示例,分享给大家,具体如下: 安装方式: npm install less less-loader --save 或者 cnpm install less less-loader --save 大家在编写 .vue 文件的 style 的时候多会选择采用预编译样式来加速开发效率 <style lang="less"> #app { font-family: 'Avenir', Helvetica, Arial, sans-s

  • Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网

    1.准备工作. 1.首先准备安装Vue及Vue-CLI $ npm install vue $ npm install -g @vue/cli 2.其次下载Tomcat tomcat.apache.org/index.html 任选一个版本,我测试用的是macOS,所以下载了第二个压缩包 ​ 下载到本地后,解压缩,并且将解压缩后的文件夹复制到以下路径下,其中电脑名称就是你的用户名称. /Users/{电脑名称}/Library ,并且重命名为ApacheTomcat,这里要提一下,在这个文件夹下

  • JavaScript 详解预编译原理

    JavaScript 预编译原理 今天用了大量时间复习了作用域.预编译等等知识 看了很多博文,翻开了以前看过的书(好像好多书都不会讲预编译) 发现当初觉得自己学的很明白,其实还是存在一些思维误区 (很多博文具有误导性) 今晚就整理了一下凌乱的思路 先整理一下预编译的知识吧,日后有时间再把作用域详细讲解一下 大家要明白,这个预编译和传统的编译是不一样的(可以理解js预编译为特殊的编译过程) JavaScript是解释型语言, 既然是解释型语言,就是编译一行,执行一行 传统的编译会经历很多步骤,分词

  • 深入解析Vue源码实例挂载与编译流程实现思路详解

    在正文开始之前,先了解vue基于源码构建的两个版本,一个是 runtime only ,另一个是 runtime加compiler 的版本,两个版本的主要区别在于后者的源码包括了一个编译器. 什么是编译器,百度百科上面的解释是 简单讲,编译器就是将"一种语言(通常为高级语言)"翻译为"另一种语言(通常为低级语言)"的程序.一个现代编译器的主要工作流程:源代码 (source code) → 预处理器 (preprocessor) → 编译器 (compiler) →

  • Vue cli3 库模式搭建组件库并发布到 npm的流程

    市面上目前已有各种各样的UI组件库,比如 Element 和 iView ,他们的强大毋庸置疑.但是我们面临的情况是需求越来越复杂,当它们不能再满足我们需求的时候,这个时候就有必要开发一套属于自己团队的组件库了. 所以本文的目的就是让读者能通过此文,小能做一个简单的插件供人使用,大能架构和维护一个组件库不在话下. 以下一个简单的颜色选择器插件 vColorPicker 讲述从开发到上线到npm的流程. vColorPicker 插件 DEMO 一.技术栈 如何通过新版脚手架创建项目,这里就不提了

  • 实例讲解JavaScript预编译流程

    实例讲解JavaScript预编译流程

    大家都知道JavaScript是解释型语言,既然是解释型语言,就是编译一行,执行一行,那又何来预编译一说呢?脚本执行js引擎都做了什么呢?今天我们就来看看吧. 1-JavaScript运行三部曲 语法分析 预编译 解释执行 语法分析很简单,就是引擎检查你的代码有没有什么低级的语法错误: 解释执行顾名思义便是执行代码了: 预编译简单理解就是在内存中开辟一些空间,存放一些变量与函数 : 2-JS预编译什么时候发生 预编译到底什么时候发生? 误以为预编译仅仅发生在script内代码块执行前 这倒并没有

  • 详解Vue CLI3 多页应用实践和源码设计

    对于一个网站来说,即需要h5页面也同时需要web页面,而h5和web页面共用很多代码,不做响应式,只能拆分两个页面来写,一个h5,一个web.用vue cli3怎么配置h5与web的应用呢? 解决思路: 首先,需要产生多页面应用,用webpack配置成多页面应用,一个h5一个web,这个网上已经有很多教程了,下面会再整理一次,接着把所有公共的代码提到多页面目录外面. 我们看一下官网给的 multi-page 的配置:需要在 vue.config.js 配置 pages,示例如下: pages:

  • Vue Cli3 打包配置并自动忽略console.log语句的方法

    下载插件 npm i -D uglifyjs-webpack-plugin 在 vue.config.js 引入使用 const UglifyJsPlugin = require('uglifyjs-webpack-plugin') module.exports = { configureWebpack: { plugins: [ new UglifyJsPlugin({ uglifyOptions: { compress: { drop_console: true, }, }, }), ],

随机推荐