参考：Vue Cli 项目打包体积过大，优化vue项目体积 - 木不识丁 - 博客园 (cnblogs.com)
系统的首屏加载时长，直接决定了用户的使用体验，也是一个前端团队开发的实力的体现。
影响首屏加载时长的因素有：物理距离导致的网络时延，文件的大小；
网络时延，可以通过CDN加速解决，主要将体积较大的文件，如ant-design-vue，，zrender，放在CDN上，减少物理距离引入的网络时延；
文件体积的大小，才是优化的关键，也是我们可以大做文章的地方。
接下来说说，减小文件大小的几种思路：
- 编译时webpack去除无用代码（webpack自带，不需要额外进行）
- 编译时webpack对文件压缩（本项目测试基本无作用）
- 服务端压缩文件 Gzip（效果明显，从36M压缩到8M）
- 只编译有改动的代码，采用contenthash，避免浏览器重新加载不变的内容
- 按需加载，首屏只加载登录页面；也可以考虑组件动态加载
- webpack dllplugin
1. 去除无用代码
webpack插件，uglifyjs-webpack-plugin，webpack4.0已经内置，不需要再引入。没有优化空间了
2. 文件压缩
js，css，图片压缩，是webpack打包时，将文件先压缩一次。
js压缩：UglifyJsPlugin
css压缩：url-loader
图片压缩：image-webpack-loader
// vue.config.js js压缩
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
configureWebpack: {
plugins: [
new UglifyJSPlugin({
uglifyOptions: {
//生产环境自动删除console
compress: {
drop_debugger: true,
drop_console: true,
pure_funcs: ['console.log']
}
},
sourceMap: false,
parallel: true
})
]
}
}
UglifyJsPlugin压缩js文件后，几乎没有任何变化
// vue.config.js 图片压缩
module.exports = {
chainWebpack: config => {
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({
bypassOnDebug: true
})
.end()
}
}
module.exports = {
chainWebpack: (config) => {
config.module.rule('images')
.test(/\.(png|jpe?g|JPG|gif|svg)(\?.*)?$/)
.use('url-loader')
.loader('url-loader')
}
}
4. 服务器文件压缩
是服务器端的功能，需要前端服务器支持。对于apache来说，在配置文件httpd.conf中，去掉如下两行代码前的#：
#LoadModule deflate_module modules/mod_deflate.so
#LoadModule headers_module modules/mod_headers.so
在该文件的最后面，增加如下代码：
<IfModule mod_deflate.c>
# 告诉 apache 对传输到浏览器的内容进行压缩
SetOutputFilter DEFLATE
# 压缩等级 9
DeflateCompressionLevel 9
#设置不对后缀gif，jpg，jpeg，png的图片文件进行压缩
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
</IfModule>
实测，服务器端采用GZIP压缩后，浏览器加载文件从36M降到了8M。可见效果还是很明显的。
5. 只编译有改动的代码
只编译有改动的代码，不编译第三方包或者没有任何改动的文件，主要目的是借助浏览器的缓存，在首屏加载时，不重复加载没有变化的文件，减少加载文件的个数，提高首屏加载速度。
