详解如何提高 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.0父子传参,子修改父数据的实现

    vue3.0父子传参,子修改父数据的实现

    这篇文章主要介绍了vue3.0父子传参,子修改父数据的实现方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue 如何处理防止按钮重复点击问题

    vue 如何处理防止按钮重复点击问题

    这篇文章主要介绍了vue 如何处理防止按钮重复点击问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 在Vue开发过程中解决和预防内存泄漏问题的方法详解

    在Vue开发过程中解决和预防内存泄漏问题的方法详解

    Vue作为一款流行的前端框架,已经在许多项目中得到广泛应用,然而,随着我们在Vue中构建更大规模的应用程序,我们可能会遇到一个严重的问题,那就是内存泄漏,因此,我们需要认识到在Vue开发过程中,内存泄漏问题的重要性,本文将给大家介绍如何解决和预防内存泄漏问题
    2023-10-10
  • vue 打包后找不到dist文件夹的解决方案

    vue 打包后找不到dist文件夹的解决方案

    这篇文章主要介绍了vue 打包后找不到dist文件夹的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • 在vue中实现PDF文件流预览功能

    在vue中实现PDF文件流预览功能

    这篇文章主要为大家详细介绍如何在vue中实现PDF文件流预览功能,文中的实现步骤讲解详细,对大家的学习或工作具有一定的参考价值,需要的可以参考一下
    2023-12-12
  • vue实现一个简单的Grid拖拽布局

    vue实现一个简单的Grid拖拽布局

    这篇文章主要为大家详细介绍了如何利用vue实现一个简单的Grid拖拽布局,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-12-12
  • Vue使用NPM方式搭建项目

    Vue使用NPM方式搭建项目

    这篇文章主要介绍了Vue项目搭建过程,使用NPM方式搭建的,本文分步骤给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2018-10-10
  • vuex 中辅助函数mapGetters的基本用法详解

    vuex 中辅助函数mapGetters的基本用法详解

    mapGetters辅助函数仅仅是将 store 中的 getter 映射到局部计算属性,在组件或界面中不使用mapGetter调用映射vuex中的getter,在组件或界面中使用mapGetter调用映射vuex中的getter,具体内容跟随小编一起通过本文学习吧 
    2021-07-07
  • vue-router钩子执行顺序示例解析

    vue-router钩子执行顺序示例解析

    这篇文章主要为大家介绍了vue-router钩子执行顺序示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • Vue组件中的data必须是一个function的原因浅析

    Vue组件中的data必须是一个function的原因浅析

    这篇文章主要介绍了Vue组件中的data必须是一个function的原因浅析,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09

最新评论