1.首先我们先安装webpack打包优化分析工具，这里我们推荐 webpack-bundle-analyzer
# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer
2.使用webpack-bundle-analyzer
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin()
]
}
或者在 vue.config里面可以使用 chainWebpack链式配置方式去配置
关于chainWebpack与configureWebpack 可以看我之前写的文章，传送门
config.plugin('BundleAnalyzerPlugin ').use(BundleAnalyzerPlugin)
运行打包命令之后就会打开一个可视化页面。如下图
image.png
左侧有个侧边栏显示打包的依赖，可以看到打包后每个chunk的大小。以及开启gzip压缩后大小比较等
image.png
从图中我们可以看到md5.js这个依赖被打包在了三个模块里面，左侧搜索输入md5，右边会跟着变红色。
1. 配置路径别名,解决重复打包的问题
根据各方的查找说解决这个重复打包的问题只需要 配置一个路径别名。就会强制引入同一个路径的文件，按道理来说也是这样。
// 配置路径别名
config.resolve.alias
.set('@', resolve('./../src'))
.set('lib@', resolve('./../src/library'))
.set('mod@', resolve('./../src/modules'))
.set('api@', resolve('./../src/api'))
.set('assets@', resolve('./../src/assets'))
.set('dir@', resolve('./../src/directive'))
// 配置一个别名，使用时和npm包一样，可以直接 import xxx from 'md5';
.set('md5', resolve('./../node_modules/md5/md5.js'))
可是最终却怎么也不行，就算配置了路径别名还是重复打包了依赖。怎么也想不明白。最后打开npm关于md5.js这个插件，如下图：
image.png
可以发现他这个插件的引入方式只支持 CommonJS 引入方式，并不支持es6 module 的引入方式。提到这个就要提提 CommonJS跟ES6 module的模块化的区别了
CommonJs 和 ES6 Module 的区别
- CommonJs导出的是变量的一份拷贝，ES6 Module导出的是变量的绑定（export default 是特殊的）
- CommonJs是单个值导出，ES6 Module可以导出多个
- CommonJs是动态语法可以写在判断里，ES6 Module静态语法只能写在顶层
- CommonJs的 this 是当前模块，ES6 Module的 this 是 undefined
所以可以发现 CommonJs导出的是变量的一份拷贝。这就知道为什么我们配置了路径别名还是会重复打包了，哪里有引入他就会拷贝一份。所以哪里用到了就会打包多少份。
那怎么办?难道没办法了吗？
天无绝人之路，此时其实可以使用 dll打包方式，将他打包到一个dll.js里面。因为md5这个库是不怎么变化的。而且都是公用的。
2. DLL打包方式
如下是dll打包配置
// /**
// * 将包含大量复用模块且不会频繁更新的库进行编译，只需要编译一次，编译完成后存在指定的文件中。
// * 在之后的构建过程中不会再对这些模块进行编译，而是直接使用 DllReferencePlugin 来引用动态链接库的代码
// */
const path = require('path')
const webpack = require('webpack')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const dllPath = './../public/vendor'
module.exports = {
entry:{
vendor:['vue', 'vue-router', 'vuex','less','element-plus','mitt','md5']
},
output:{
filename:'[name].dll.js',
path:path.resolve(__dirname,dllPath),
library:'[name]_[hash]'
},
plugins: [
new CleanWebpackPlugin(),
//设置环境变量
new webpack.DefinePlugin({
'process.env':{
NODE_ENV:JSON.stringify('production')
}
}),
new webpack.DllPlugin({
name: '[name]_[hash]',
path: path.join(__dirname, dllPath, '[name]-manifest.json'),
context:process.cwd()
}),
]
}
可以看到我们已经将md5也一起打包进dll里面了。
我们来看看打包分析工具生成的视图
未解决依赖重复打包问题 大小是 1.27MB
image.png
解决之后我们来看看
image.png
可以看到去掉重复之后 变成 1.25MB了，并且搜索md5右边视图已经没有了。可以在左边搜索里面看到现在引用都只引用了dll里面的了。都指向dll。只有这一份。所以到这里就解决了。
总结
解决依赖重复打包的问题有三种方式
1.配置路径别名，强制使用统一路径(前提是这个依赖必须支持es6 module引入方式。不然也只是拷贝)
- 使用dll打包
3.使用cdn加速（配置externals打包的时候忽略，采用cdn引入方式）
第三种cdn方式后面我会专门写一篇文章来介绍
文章传送门
网友评论