记一次webpack打包优化

未进行打包优化的痛点:

  随着项目的不断扩大,引入的第三方库会越来越多,我们每次build的时候会对所有的文件进行打包,耗时必定很长,不利于日常开发。

解决思路:

  第三方库我们只是引入到项目里来,一般不会经常性的去修改源码,一般都是在src目录下编写业务代码,因此可以把第三方依赖和src分开打包。

  每次build的时候我们只需要把之前build好的第三方依赖文件引入到项目中即可,避免了我们每次build的时候都会build第三方依赖。

  当第三方依赖发生改变的时候我们只需要把第三方依赖再build一次就行。

步骤一:构建项目 引入第三方依赖

## 初始化项目

vue init webpack webpack-test
cd dll-test

## 安装基础配置包

npm install

## 安装依赖模块(第三方静态资源)

npm install vuex vue-router axios lodash element-ui  vue-bus iview  --save

安装完成后再package.json中可查看到对应的资源

  main.js中引入第三方资源

import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview'
import VueBus from 'vue-bus'
import lodash from 'lodash'
import vuex from 'vuex'
import ElementUI from 'element-ui'
import axios from 'axios'
import vueRouter from 'vue-router'

Vue.config.productionTip = false

Vue.use(iView)
Vue.use(ElementUI)
Vue.use(VueBus)
Vue.use(lodash)
Vue.use(vuex)
Vue.use(axios)
Vue.use(vueRouter)

看下未优化前的打包时间

22930ms差不多23s,后面项目变大,可达数分钟。 

步骤二:使用DllPlugin插件把第三方依赖抽离出来

  在build文件夹下(根目录,config目录下都可以)创建webpack.dll.conf.js

  内容如下:

var path = require("path");
var webpack = require("webpack");

module.exports = {
  // 你想要打包的模块
  entry: {
    vendor: [
    'axios',
    'iview',
    'vue/dist/vue.esm.js',
    'lodash',
    'vue-bus',
    'element-ui',
    'vue-router',
    'vuex',
    ]
  },
  output: {
    path: path.join(__dirname, '../static/js'), // 打包后文件输出的位置
    filename: '[name].dll.js',
    library: '[name]_library' 
  },
  plugins: [
    new webpack.DllPlugin({
      //生成上文说到清单文件,此处放在当前build文件下面,你也可以放其他地方
      path: path.join(__dirname, '.', '[name]-manifest.json'), 
      name: '[name]_library'
    }),
   //压缩 只是为了包更小一点 
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        drop_console:true,
        drop_debugger:true
      },
      output:{
        // 去掉注释内容
        comments: false,
      },
      sourceMap: true
    })
  ]
};

将第三方包抽离出来打包的脚本已经写好了,需要编写一条命令来执行该脚本。

package.json中scripts下加入该命令"dll": "webpack --config build/webpack.dll.conf.js"

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js",
    "dll": "webpack --config build/webpack.dll.conf.js"
  },

  执行下npm run dll 命令将第三方依赖进行打包

可以看到在项目中生成了vendor-manifest.json 和 vendor.dll.js这两个文件

vendor-manifest.json是dllPlugin生成的资源,内容如下:

可以看到,每一个公共库中的js文件,都会有一个对应的资源ID。

同时生成一个打包文件vendor.dll.js,一般是依赖库, 这个文件会暴露给全局一个类似require功能的函数,这个全局函数的名字是可以配置的, 比如,可以为 vendorRequire();

步骤三:引入DllReferencePlugin 插件,让在打包业务组件的时候自动引入第三方依赖打包好的资源,根据vendor-manifest.json中对应的资源id。

DllReferencePlugin 是在打包过程中使用的,在打包业务代码时,每遇到一个在manifest.json中出现的文件,就可以利用上述 vendor.dll.js 暴露的全局函数进行相应处理,而不会把这个文件打包进来。

安装add-asset-html-webpack-plugin插件(将打包好的endor.dll.js加入到生成的html中)

npm add-asset-html-webpack-plugin --save

在webpack.prod.conf.js中加入以下代码:

// 将生成的css js添加到HTML文件
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')

在plugins中加入如下代码:

    // 打包优化  
    new webpack.DllReferencePlugin({
      context: path.resolve(__dirname, '..'), 
      manifest: require('./vendor-manifest.json')
    }),
    //这个主要是将生成的vendor.dll.js文件加上hash值插入到页面中。
    new AddAssetHtmlPlugin([{
      filepath: path.resolve(__dirname,'../static/js/vendor.dll.js'),
      outputPath: utils.assetsPath('js'),
      publicPath: path.posix.join(config.build.assetsPublicPath, 'static/js'),
      includeSourcemap: false,
      hash: true,
    }]),

至此第三方依赖的抽离已完成,我们打包下看看优化后的速度。

npm run build

3187ms  才3s,是不是比未优化的22930ms快多了,在项目越来越大的时候效果更明显。

可以使用npm run build -report 来查看打包的直观图。

这只是一种优化的方式,还有其他可优化的部分,后续继续添加。

赶紧去解决打包时间过长的烦恼吧。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏后端技术探索

nginx 授权资源跨站访问

最近一h5前端同事反馈说某个字体库连接(类似于http://www.example.com/test.ttf)无法访问。

1012
来自专栏Jerry的SAP技术分享

webpack打包过程如何调试?

本文适用于已经会使用webpack的前端开发人员,但是想进一步了解webpack细节和进阶。

2463
来自专栏DeveWork

修改WordPress登陆文件名wp-login.php,防密码被暴力破解

最近WordPress界出了条新闻:博客平台Wordpress网站遭遇大规模暴力破解攻击(原文附后)。看到这条消息,我立马到空间后台查看了下,发现确实是有很多来...

3065
来自专栏跟我一起学Docker

【番外篇】Vim-Go和Vs-Code环境搭建

如果说在Linux环境下,什么编辑器最好用,如果我说是VIM,估计会有一大部分人嗤之以鼻,怎么可能。VIM可能是他用过众多编辑器最难用的一个。在我...

4165
来自专栏指路者

如何远程控制局域网内的电脑评论(0)

,比如在公司有的同事有某个问题上不会解决,需要用到远程控制帮他操作。还有很多的游戏代练公司需要由一个人同时操作好几台的电脑,在每台电脑上都登录着不同的游戏账号进...

1352
来自专栏美奔科技

web站点应用之路_wdcp面板部署篇(一)

熟悉的人都知道,搭建web几乎是最简单的了,一般有两种方式来搭建web站点.一种是自己先安装各类环境,比如php+apache+mysql ,或者是asp.ne...

2605
来自专栏GIS讲堂

Openlayers4中地图的导出

本文讲述Openlayers4中地图的导出,包括调用天地图切片跨域、Geoserver11 WMS跨域等。

3662
来自专栏小程序之家

如何在小程序中实现文件上传下载

在如何实现小程序登录鉴权这篇文章中,我们实现了小程序的wx.request请求操作,除了request之外,小程序还有文件下载wx.downloadFile和文...

13.5K7
来自专栏Debian社区

MX Linux 17 Beta 1 发布,基于 Debian 的发行版

MX Linux 是基于 Debian 稳定分支的面向桌面的 Linux 发行,它是 antiX 及早先的 MEPIS Linux 社区合作的产物。它采用 Xf...

541
来自专栏java 成神之路

mysql 启动出错问题排查

2203

扫码关注云+社区

领取腾讯云代金券