复制代码

2）vue.config.js中 引入

constBundleAnalyzerPlugin = require( 'webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {

configureWebpack: {

plugins: [

newBundleAnalyzerPlugin

]

}

}

复制代码

3）npm run serve运行后，在浏览器打开http://127.0.0.1:8888/可以看到分析页面

初始打包速度 25386ms

初始打包速度 25386ms

totalTime.png 开始优化 ✈︎1、externals 提取项目依赖

从上面的打包分析页面中可以看到，chunk-vendors.js体积为 2.21M，其中最大的几个文件都是一些公共依赖包，那么只要把这些依赖提取出来，就可以解决 chunk-vendors.js 过大的问题

可以使用 externals来提取这些依赖包，告诉 webpack 这些依赖是外部环境提供的，在打包时可以忽略它们，就不会再打到 chunk-vendors.js 中

1）vue.config.js 中配置：

module.exports = {

configureWebpack: {

externals: {

vue: 'Vue',

'vue-router': 'VueRouter',

axios: 'axios',

echarts: 'echarts'

}

}

复制代码

2）在 index.html 中使用 CDN 引入依赖

< src= "http://lib.baomitu.com/vue/2.6.14/vue.min.js">

< src= "http://lib.baomitu.com/vue-router/3.5.1/vue-router.min.js">

< src= "http://lib.baomitu.com/axios/1.2.1/axios.min.js">

< src= "http://lib.baomitu.com/echarts/5.3.2/echarts.min.js">

< /body>

复制代码

验证 externals 的有效性：

重新打包，最新数据如下：

打包体积：1.12M

externalsSize.png

打包速度：18879ms

externalsTime.png

使用 externals 后，包体积压缩50%、打包速度提升26%

2、组件库的按需引入

为什么没有使用 externals 的方式处理组件库呢？

externals缺点：直接在html内引入的，失去了按需引入的功能，只能引入组件库完整的js和css

组件库按需引入的原理：最终只引入指定组件和对应的样式

elementUI 需要借助 babel-plugin-component[1] 插件实现，插件的作用如下：

如按需引入 Button 组件：

import{ Button } from'element-ui'

Vue.component(Button.name, Button)

复制代码

编译后的文件（自动引入 button.css）：

import_Button from"element-ui/lib/button";

import_Button2 from"element-ui/lib/theme-chalk/button.css";

// base.css是公共的样式

import"element-ui/lib/theme-chalk/base.css";

Vue.component(_Button.name, _Button);

复制代码

通过该插件，最终只引入指定组件和样式，来实现减少组件库体积大小

1）安装 babel-plugin-component

npm install babel-plugin-component -D

复制代码

2）babel.config.js中引入

module.exports = {

presets: [ '@vue/app'],

plugins: [

[

'component',

{

libraryName: 'element-ui',

styleLibraryName: 'theme-chalk'

}

]

]

};

复制代码

验证组件库按需引入的有效性：

重新打包，最新数据如下：

打包体积：648KB

babel-plugin-componentSize.png

打包速度：15135ms

babel-plugin-componentTime.png

组件库按需引入后，包体积压缩72%、打包速度提升40%

同时 chunk-vendors.css的体积也有了明显的减少，从206KB降到了82KB

原始体积：

originalCss.png

按需引入后：

babelCss.png3、减小三方依赖的体积

继续分析打包文件，项目中使用了 momentjs，发现打包后有很多没有用到的语言包

momentJs.png

使用 moment-locales-webpack-plugin插件，剔除掉无用的语言包

1）安装

npm install moment-locales-webpack-plugin -D

复制代码

2）vue.config.js 中引入

constMomentLocalesPlugin = require( 'moment-locales-webpack-plugin');

module.exports = {

configureWebpack: {

plugins: [

newMomentLocalesPlugin({ localesToKeep: [ 'zh-cn']})

]

}

}

复制代码

验证插件的有效性：

重新打包，最新数据如下：

打包体积：407KB

momentJsSize.png

打包速度：10505ms

momentJsTime.png

减小三方依赖体积后，包体积压缩82%、打包速度提升59%

4、HappyPack 多线程打包

由于运行在 Node.js 之上的 webpack 是单线程模型的，我们需要 webpack 能同一时间处理多个任务，发挥多核 CPU 电脑的威力

HappyPack就能实现多线程打包，它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程，来提升打包速度

1）安装

npm install HappyPack -D

复制代码

2）vue.config.js 中引入

constHappyPack = require( 'happypack');

constos = require( 'os');

// 开辟一个线程池，拿到系统CPU的核数，happypack 将编译工作利用所有线程

consthappyThreadPool = HappyPack.ThreadPool({ size: os.cpus.length });

module.exports = {

configureWebpack: {

plugins: [

newHappyPack({

id: 'happybabel',

loaders: [ 'babel-loader'],

threadPool: happyThreadPool

})

]

}

}

复制代码

验证 HappyPack 的有效性：

重新打包，最新数据如下：

打包速度：8949ms

happyPackTime.png

使用HappyPack后，打包速度进一步提升了65%

由于测试项目较小，打包时间缩短的不算太多。实测发现越是复杂的项目，HappyPack 对打包速度的提升越明显

5、Gzip压缩

线上的项目，一般都会结合构建工具 webpack 插件或服务端配置 nginx，来实现 http 传输的 gzip 压缩，目的就是把服务端响应文件的体积尽量减小，优化返回速度

html、js、css资源，使用 gzip 后通常可以将体积压缩70%以上

这里介绍下使用 webpack 进行 gzip 压缩的方式，使用 compression-webpack-plugin插件

1）安装

npm install compression-webpack-plugin -D

复制代码

2）vue.config.js 中引入

constCompressionPlugin = require( 'compression-webpack-plugin');

module.exports = {

configureWebpack: {

plugins: [

newCompressionPlugin({

test: /\.(js|css)(\?.*)?$/i, //需要压缩的文件正则

threshold: 1024, //文件大小大于这个值时启用压缩

deleteOriginalAssets: false//压缩后保留原文件

})

]

}

}

复制代码

验证插件的有效性：

重新打包，原来 407KB的体积压缩为 108KB

gZip.png 6、DllPlugin 动态链接库

DllPlugin与 externals 的作用相似，都是将依赖抽离出去，节约打包时间。区别是 DllPlugin 是将依赖单独打包，这样以后每次只构建业务代码，而 externals 是将依赖转化为 CDN 的方式引入

当公司没有很好的 CDN 资源或不支持 CDN 时，就可以考虑使用 DllPlugin ，替换掉 externals

DllPlugin 配置流程大致分为三步：

1）创建 dll.config.js 配置文件

import{ DllPlugin } from"webpack";

exportdefault{

// 需要抽离的依赖

entry: {

vendor: [ "vue", "vue-router", "axios", "echarts"]

},

mode: "production",

optimization: {

splitChunks: {

cacheGroups: {

vendor: {

chunks: "all",

name: "vendor",

test: /node_modules/

}

}

}

},

output: {

filename: "[name].dll.js", // 输出路径和文件名称

library: "[name]", // 全局变量名称：其他模块会从此变量上获取里面模块

path: AbsPath( "dist/static") // 输出目录路径

},

plugins: [

newDllPlugin({

name: "[name]", // 全局变量名称：减小搜索范围，与output.library结合使用

path: AbsPath( "dist/static/[name]-manifest.json") // 输出目录路径

})

]

};

复制代码

2）package.json 配置脚本

"build:dll": "webpack --config ./dll.config.js",

复制代码

3）使用 DllReferencePlugin将打包生成的dll文件，引用到需要的预编译的依赖上来，并通过 html-webpack-tags-plugin在打包时自动插入dll文件

vue.config.js 配置如下

import{ DllReferencePlugin } from"webpack";

importHtmlTagsPlugin from"html-webpack-tags-plugin";

exportdefault{

configureWebpack: {

plugins: [

newDllReferencePlugin({

manifest: AbsPath( "dist/static/vendor-manifest.json") // manifest文件路径

}),

newHtmlTagsPlugin({

append: false, // 在生成资源后插入

publicPath: "/", // 使用公共路径

tags: [ "static/vendor.dll.js"] // 资源路径

})

]

}

};

复制代码

先运行 npm run build:dll打包生成依赖文件，以后只用运行 npm run build构建业务代码即可

优化总结

经过上面的一系列优化，可以看到：

包体积由原来的 2.25M减少到 407KB，压缩了82%

打包速度由原来的 25386ms减少到 8949ms，提升了65%

包体积由原来的 2.25M减少到 407KB，压缩了82%

打包速度由原来的 25386ms减少到 8949ms，提升了65%

这些方式虽然很常规，但确实可以有效地提升项目的性能

本文主要介绍的是 项目打包构建方面的优化方式，下一篇聊一聊 业务代码层面的性能优化，其中会有很多有趣的方案

参考资料

[1]

https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2FQingWei-Li%2Fbabel-plugin-component: https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2FQingWei-Li%2Fbabel-plugin-component

---END---

推荐↓↓↓返回搜狐，查看更多