哈哈，简单记录一下，一些自己在打包调试时候总结的一些方法
一般咱们在vue项目打包的时候肯定会遇到一个问题，打包完后文件大小对于加载速度的影响。
首先咱们要知道打包完后一些模块的情况，咱们就会用上webpack-bundle-analyzer这个插件，去分析打包的情况
控制打包后块(chunk)大小的方法：
- 移除和忽略一些无用的插件和一些引入的包内无用的内容
// 移除prefetch插件，避免加载多余的资源
config.plugins.delete('prefetch')
// 移除 preload 插件，避免加载多余的资源
config.plugins.delete('preload');
//忽略/moment/locale下的所有文件
config.plugin('ignore').use(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/));
- 开启压缩
config.optimization.minimize(true);//进行代码压缩
- 在打包时，将包进行切割和切割后的命名定义
config.optimization.splitChunks({
chunks: 'all',
minSize: 30000, // 字节 引入的文件大于30kb才进行分割
maxSize: 50000, // 50kb，尝试将大于50kb的文件拆分成n个50kb的文件
minChunks: 1, // 模块至少使用次数
maxAsyncRequests: 5, // 同时加载的模块数量最多是5个，只分割出同时引入的前5个文件
maxInitialRequests: 3, // 首页加载的时候引入的文件最多3个
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 0,
chunks: 'all' // only package third parties that are initially dependent
// maxSize: 32000
},
// antDesignVue: {
// chunks: 'initial', // only package third parties that are initially dependent
// name: 'chunk-antDesignVue', // split elementUI into a single package
// priority: 2, // the weight needs to be larger than libs and app or it will be packaged into libs or app
// test: /[\\/]node_modules[\\/]_?ant-design-vue(.*)/ // in order to adapt to cnpm
// // maxSize: 32000
// },
common: {
chunks: 'all',
test: /[\\/]src[\\/]js[\\/]/,
name: 'common',
minChunks: 2,
maxInitialRequests: 5,
minSize: 0,
priority: 3,
maxSize: 32000
},
styles: {
name: 'styles',
test: /\.(sa|sc|le|c)ss$/,
chunks: 'all',
enforce: true,
maxSize: 32000
}
}
})
- 若是觉得打包太慢，可以开启多线程打包 (webpack5自带有terser-webpack-plugin，webpack4的话就得下载一下了)
config.plugins.push(
new TerserPlugin({
parallel: 4,
terserOptions: {
parse: {
// ecma: 8
},
compress: {
ecma: 5,
// warnings: false,
comparisons: false,
inline: 2
},
mangle: {
safari10: true
},
output: {
ecma: 5,
comments: false,
ascii_only: true
}
}
})
)
5.要是觉得一些第三方的包过于庞大，可以使用cdn来进行引入，但是在使用前必须考虑cdn的稳定性，还有必要性（被坑过，特别是免费的cdn，尽量别用//cdn.jsdelivr.net的，中国区域内的最近频繁炸，可以使用国内的
https://cdnjs.cloudflare.com
https://cdnjs.com/
https://www.unpkg.com/
https://www.bootcdn.cn/
如果是自己花钱搭建的cdn服务器，就另说）
6.但是咱们是要弄gzip的男人，所以cdn啥的统统给你压缩掉 为啥要用这个gzip呢，因为前面的打包方法，对于包的体积优化是有限的，远不及压缩后（见过一个项目，啥优化也不搞，主包大的要命，结果来个压缩，优化速度成倍的提升上去了，菜鸡的我直接傻了眼）
打包的时候开启gzip可以很大程度减少包的大小，非常适合于上线部署。更小的体积对于用户体验来说就意味着更快的加载速度以及更好的用户体验
// 切记，注意版本
npm i compression-webpack-plugin
// vue.config.js
const CompressionPlugin = require('compression-webpack-plugin');
// 匹配文件后缀
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
chainWebpack: config => {
config.resolve.alias.set('@', resolve('src'));
if (process.env.NODE_ENV === 'production') {
config.plugin('compressionPlugin')
.use(new CompressionPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: productionGzipExtensions,
threshold: 10240, // 压缩门槛
minRatio: 0.8, // 最小压缩比
deleteOriginalAssets: true, //是否删除原资源，
}));
}
},
ps：记得让后端搞个nginx来支持一下gzip喔，不然白搞了
在撇去需要后端支持，和要部署的情况才能看到效果的情况下，前端拥有自己的插件来实现gzip打包后，直接在本地跑起来的项目
首先先来科普一下，http-server是个什么东西 使用http-server可以快速搭建一个简单的服务器。可用来：
- 做模拟数据
- 做静态资源服务器
- 做调试、测试的前端服务器
- 做代理转发
１、依赖环境：首先安装node.js环境，然后使用npm进行安装 npm i -g http-server
２、命令行格式：http-server [path] [options]
3、参数介绍：
-p 或者 --port 端口设置，默认是 8080
-a 监听地址设置默认是 0.0.0.0
-d 是否显示文件列表 默认true
-i 显示自动索引 默认true
-g 或者 --gzip 默认false，当文件的gzip版本存在且请求接受gzip编码时，它将服务于./public/some-file.js.gz，而不是./public/some-file.js
-e 或者 --ext 如果没有提供默认文件扩展名(默认为html)
-s 或者 --silent 禁止控制台日志信息输出
–cors 允许跨域资源共享
-o 启动服务后打开默认浏览器
-c 设置缓存cache-control max-age heade存留时间（以秒为单位），示例：-c10是10秒，默认是3600秒，如果要禁用缓存就使用-c-1
-U 或者 --utc 使用 UTC格式，在控制台输出时间信息
-P 或者 --proxy 通过一个 url地址，代理不能通过本地解析的资源
-S 或者 --ssl 使用https协议
-C 或者 --cert ssl证书文件的路径，默认是cert.pem
-K 或者 --key ssl密匙文件路径
-h 或者 --help 显示帮助
咱们只需要在打包完后，在命令行cd到打包的文件夹
命令行在dist目录下，启动已经全局安装的http-server服务
http-server -g -P http://xxxx.xxxxx.xxx
启用gzip，且代理到你测试用的地址，就可以在本地跑起来一个打包好的dev服务的项目 就可以大张旗鼓的调试一下，首屏加载，加载速度等衡量前端项目质量的测试了啊
如果错误望各位积极指正，互相学习
人类的本质就是把学到的东西分享下去
