脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → 提高webpack构建Vue速度

详解如何提高 webpack 构建 Vue 项目的速度

 更新时间：2017年07月03日 17:28:24   作者：林鑫  
这篇文章主要介绍了详解如何提高 webpack 构建 Vue 项目的速度，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

前言

最近有人给我的 Vue2 后台管理系统解决方案 提了 issue ，说执行 npm run build 构建项目的时候极其慢，然后就引起我的注意了。在项目中，引入了比较多的第三方库，导致项目大，而每次修改，都不会去修改到这些库，构建却都要再打包这些库，浪费了不少时间。所以，把这些不常变动的第三方库都提取出来，下次 build 的时候不再构建这些库，这样既可大大缩短构建时间。那么要怎么去实现呢？

解决方案

DllPlugin 和 DllReferencePlugin

查找了一下资料，发现我们可以利用 webpack 的插件 DllPlugin 和 DllReferencePlugin 来实现我们要的功能。

DllPlugin 可以把我们需要打包的第三方库打包成一个 js 文件和一个 json 文件，这个 json 文件中会映射每个打包的模块地址和 id，DllReferencePlugin 通过读取这个json文件来使用打包的这些模块。

接下来就看如何实现。

配置文件

在 build 文件夹中新建 webpack.dll.config.js (项目基于 vue-cli 的)

const path = require('path');
const webpack = require('webpack');

module.exports = {
 entry: {
  vendor: ['vue/dist/vue.common.js','vue-router', 'babel-polyfill','axios','vue-echarts-v3']
 },
 output: {
  path: path.join(__dirname, '../static/js'),
  filename: '[name].dll.js',
  library: '[name]_library'    // vendor.dll.js中暴露出的全局变量名
 },
 plugins: [
  new webpack.DllPlugin({
   path: path.join(__dirname, '.', '[name]-manifest.json'),
   name: '[name]_library'
  }),
  new webpack.optimize.UglifyJsPlugin({
   compress: {
    warnings: false
   }
  })
 ]
};

然后在 package.json 中配置命令

"scripts": {
  ...
  "build:dll": "webpack --config build/webpack.dll.conf.js"
}

执行 npm run build:dll 命令来生成 vendor.dll.js 和 vendor-manifest.json

需要在 index.html 引入 vendor.dll.js

<body>
  <div id="app"></div>
  <script src="./static/js/vendor.dll.js"></script>
</body>

vendor-manifest.json 的内容大概如下：

{
 "name": "vendor_library",
 "content": {
  "./node_modules/core-js/modules/_export.js": {
   "id": 0,
   "meta": {}
  },
  ...
}

接下来就在 webpack.base.config.js 中通过 DLLReferencePlugin 来使用 DllPlugin 生成的 DLL Bundle

var webpack = require('webpack');

module.exports = {
  entry: {
    app: ['./src/main.js']
  },
  module: {
    ...
  }
  // 添加DllReferencePlugin插件
  plugins: [
    new webpack.DllReferencePlugin({
      context: path.resolve(__dirname, '..'),
      manifest: require('./vendor-manifest.json')
    }),
  ]
}

原先 build 需要 95446ms，配置之后执行 build 只需 14360ms，减少了 75% 的时间。

但是存在一个问题，当把太多的第三方依赖都打包到 vendor.dll.js 中去，该文件太大也会影响首屏加载时间。所以要权衡利弊，可以异步加载的插件就没有必要打包进来了，不要一味的把所有都打包到这里面来获取构建时的快感。

示例地址：vue-manage-system

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Vue3中toRef与toRefs的区别

    Vue3中toRef与toRefs的区别

    这篇文章主要介绍了Vue3中toRef与toRefs的区别，toRefs与toRef功能一致，但可以批量创建多个ref对象，需要注意的是它只会解析对象的第一层属性，语法直接传入对象 toRefs，下面更多内容的介绍需要的小伙伴可以参考一下
    2022-03-03
  • 基于vue2框架的机器人自动回复mini-project实例代码

    基于vue2框架的机器人自动回复mini-project实例代码

    本篇文章主要介绍了基于vue2框架的机器人自动回复mini-project实例代码，具有一定的参考价值，有兴趣的可以了解一下
    2017-06-06
  • vue3中reactive不能直接赋值的解决方案

    vue3中reactive不能直接赋值的解决方案

    这篇文章主要介绍了vue3中reactive不能直接赋值的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-05-05
  • vue使用exif获取图片经纬度的示例代码

    vue使用exif获取图片经纬度的示例代码

    这篇文章主要介绍了vue使用exif获取图片经纬度的示例代码，帮助大家更好的利用vue获取图片信息，感兴趣的朋友可以了解下
    2020-12-12
  • 基于Vue.js 实现简易拖拽指令

    基于Vue.js 实现简易拖拽指令

    在 Vue.js 中,我们可以通过自定义指令的方式来实现拖拽功能,使得代码更加模块化和可复用,本文将介绍如何基于 Vue.js 实现一个简易的拖拽指令,感兴趣的朋友跟随小编一起看看吧
    2024-04-04
  • 使用Vue+ElementUI动态生成面包屑导航教程

    使用Vue+ElementUI动态生成面包屑导航教程

    Vue和ElementUI都是非常流行的前端开发框架,它们可以让我们更加便捷地开发前端应用,下面这篇文章主要给大家介绍了关于使用Vue+ElementUI动态生成面包屑导航的相关资料,需要的朋友可以参考下
    2023-05-05
  • Vue组合式API--setup中定义响应式数据的示例详解

    Vue组合式API--setup中定义响应式数据的示例详解

    在Vue2.x中，编写组件的方式是使用Options API，它的特点是在对应的属性中编写对应的功能模块，这篇文章主要介绍了Vue组合式API--setup中定义响应式数据详解,需要的朋友可以参考下
    2022-10-10
  • vue+springmvc导出excel数据的实现代码

    vue+springmvc导出excel数据的实现代码

    这篇文章主要介绍了vue+springmvc导出excel数据的实现代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • Vue3 计算属性的用法详解

    Vue3 计算属性的用法详解

    学过 vue2 的宝子们应该都清楚，计算属性这个东西在项目开发过程中使用的还是比较频繁的，使用频率相对来说比较高。本文就来为大家介绍一下Vue3中计算属性的用法，需要的可以参考一下
    2022-07-07
  • Vue3中虚拟dom转成真实dom的过程详解

    Vue3中虚拟dom转成真实dom的过程详解

    Vue.js 在其运行过程中会将模板编译成虚拟 DOM (VNode),然后再将 VNode 渲染成实际的 DOM 节点,这个过程是由 Vue 内部的编译器和渲染系统完成的,本文给大家介绍了Vue3中虚拟dom转成真实dom的过程,需要的朋友可以参考下
    2024-09-09

最新评论