Webpack打包优化:使用外链与拆包模式

栏目: 编程语言 · 发布时间: 5年前

内容简介:这是一个基于 vue-cli 的管理后台项目,由于依赖较多,打包结果如下为什么 vendor 体积这么大?引用的库太多时,vendor的体积会很大,借助 Webpack 的分析工具,看了下各个依赖的体积分布

这是一个基于 vue-cli 的管理后台项目,由于依赖较多,打包结果如下

Webpack打包优化:使用外链与拆包模式

二、查找原因

为什么 vendor 体积这么大?

引用的库太多时,vendor的体积会很大,借助 Webpack 的分析工具,看了下各个依赖的体积分布

Webpack打包优化:使用外链与拆包模式

找到原因,是 Highcharts 和 Element-UI占了较大体积,导致性能减弱。

这两个库都提供了按需加载的功能,能有效减小体积,只是刚好这个管理后台项目依赖较多

那么有办法控制打包的体积超过一定值时,分成多个文件打包吗?

或者通过配置将部分库抽离出来,打包成另外的文件?

三、解决方法

(一)CDN 外链

先把 Highcharts 和 Lodash 通过外链引入

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js" />
<script src="//cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.7/highstock.js" />
<script src="//cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.7/js/highcharts-more.js" />
<script src="//cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.7/js/modules/treemap.js" />
复制代码

外链引入的资源就不能直接通过 import 来使用,但可以通过 Webpack 的 externals 特性来兼容

import _ from 'lodash'
import Highcharts from 'highcharts'

console.log([_, Highcharts])
复制代码

这样配置 Webpack 就知道这两个依赖是外链全局的,不需要打包

externals: {
  lodash: '_',
  highcharts: 'Highcharts'
}
复制代码

先看看去掉 Highcharts 和 Lodash 的效果

Webpack打包优化:使用外链与拆包模式

vendor 也避免打包了这两个库

Webpack打包优化:使用外链与拆包模式

这种方式适用于不常更新的第三方依赖,采用外链,Element-UI 由于常有新特性更新,需要保持最新版本,所以还是通过 npm 来管理

内网部署的问题

如若这个管理后台项目要部署到一个内网机器,访问不了外网,那要怎么解决呢?

(二)拆开 vendor

Webpack 默认是将依赖打包成一个文件,这样优点是减少资源请求数,但当依赖增多,体积增大,一个资源的加载速度就会减慢

所以尝试去拆包

new webpack.optimize.CommonsChunkPlugin({
  name: 'charts',
  chunks: ['vendor'],
  minChunks: module => module.resource.indexOf('highcharts') > -1
}),

new webpack.optimize.CommonsChunkPlugin({
  name: 'utils',
  chunks: ['vendor'],
  minChunks: module => module.resource.indexOf('lodash') > -1
}),

new webpack.optimize.CommonsChunkPlugin({
  name: 'ui',
  chunks: ['vendor'],
  minChunks: module => module.resource.indexOf('element-ui') > -1
})
复制代码

拆包后的打包结果

Webpack打包优化:使用外链与拆包模式

看看分析工具

Webpack打包优化:使用外链与拆包模式

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

VISUAL BASIC 6.0 WINDOWS API讲座

VISUAL BASIC 6.0 WINDOWS API讲座

王国荣 / 人民邮电出版社 / 1999-06-01 / 76.00元

本书全面介绍了在Visual Basic 6.0中如何调用Windows API的技术,特别是结合读者在应用中经常遇到的具体问题编写了许多应用范例,书中还给出了API函数的速查表。本书主要内容包括: Windows API的基本概念和调用方法,资源文件的使用,Windows的消息系统及其应用,API在绘图中的应用,多媒体文件的播放,特殊命令按钮的制作等。 本书适用于已熟悉Visual Basic的一起来看看 《VISUAL BASIC 6.0 WINDOWS API讲座》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具