vue2.x从fig.js配置到项⽬优化
⽬录
前⾔
打包优化，减⼩包的⼤⼩
图⽚视频压缩
js代码压缩
cdn加速
⾸屏加载时间优化
路由懒加载优化
gzip压缩优化
参考⽂献
前⾔
在实际项⽬中优化也是经常需要做的事情，特别在中⼤型项⽬中降低打包体积⼤⼩，提⾼⾸屏加载时间是必不可少的，同时在⾯试中也是⼀个⾼频问题。本⽚⽂章我将从fig.js配置到项⽬优化前后效果做⼀个介绍。
主要适⽤于Vue前端的优化，通过CDN，路由懒加载，图⽚压缩，GIZP压缩以后，达到降低部署到服务器上的前端项⽬的包体积⼤⼩，因为包体积⼤⼩直接影响了项⽬⾸次打开的速度，并且前端⽂件体积变⼩，也意味着 CSS⽂件和JS⽂件也变⼩了，下载速度会更快，同理⽹页加载速度也就会变得更快，最终打到优化前端项⽬的⽬的
该⽂件应该导出⼀个包含了选项的对象
配置选项
这边说⼏个常⽤的配置：
pages: 配置应⽤的⼊⼝⽂件地址
outputDir：⽣成的⽣产环境构建⽂件的⽬录
configureWebpack：简单的打包配置，因为脚⼿架内置了webpack，所以在不修改打包命令的情况在，在这⾥个性化配置打包参数，可以为⼀个对象或者箭头函数，注意：这两种形式同时存在的话，后者会覆盖前者，所以只能⽤⾥卖弄的⼀种。
chainWebpack：链式操作的webpack配置，是⼀个函数
devServer：代理配置、服务端⼝设置，不设置的话默认端⼝：8080
详细配置说明可以到官⽹。
打包优化，减⼩包的⼤⼩
正常打包都有默认的配置，在不修改的情况下也可以打包成功，但是包会⽐较⼤。
通过vue脚⼿架⾃带的分析⼯具看下优化前的情况，在命令⾏输⼊：
vue ui
这是我⾃⼰项⽬前端部分的包分析
图⽚视频压缩
看可以看到有三个图⽚视频⽂件可以优化，其中mp4为了保持分辨率不好压缩暂时忽略。
压缩下图⽚，压缩率还不错
编译时还可以使⽤依赖再次压缩：image-webpack-loader
...
chainWebpack: config => {
// 压缩图⽚
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({
//{ bypassOnDebug: true }
mozjpeg: { progressive: true, quality: 65 }, // Compress JPEG images
optipng: { enabled: false }, // Compress PNG images
pngquant: { quality: [0.65, 0.9], speed: 4 }, // Compress PNG images
gifsicle: { interlaced: false } // Compress GIF images
// webp: { quality: 75 } // Compress SVG images
})
.end()
}
...
js代码压缩
代码压缩需要⽤到依赖：uglifyjs-webpack-plugin
cnpm i -D muglifyjs-webpack-plugin
由于打包时本来就会对空格进⾏处理，所以我们使⽤这个插件的⽬的时删除⽣产环境中的console和注释
注意：由于使⽤这个插件会导致编译时间变长，所以建议在⽣产环境使⽤。
...
configureWebpack: {
...
new UglifyJsPlugin({
uglifyOptions: {
output: {
// 删除注释
comments: false
},
compress: {
drop_console: true,
drop_console: true //清除console语句
// pure_funcs: ['console.log'] // ⾃定义去除函数
}
},
sourceMap: false
})
: () => {}  ...
}
,,,
cdn加速
正常的webpack打包会⽣成chunk-vendors.js⽂件，它是捆绑所有不是⾃⼰的模块，⽽是来⾃其他⽅的模块的捆绑包。它们称为第三⽅模块或供应商模块。也就是来⾃项⽬/node_modules⽬录的所有模块。所以当依赖模块越来越多，模块越来越⼤时chunk-vendors.js就会越来越⼤
如果我们⾃⼰制作的⽹站需要挂在到服务器上供其他⼈使⽤，要怎样才能让你的⽤户在访问你的⽹址时更加快速呢？
有两种⽅法:
让你的⽂档尽可能地⼩或少，这样整个传输速度就会有所提升。
尽可能让你的⽂档离最终⽤户所在的位置近⼀些，这样整个传输路径就会⼤⼤减短。
公有云⼚商在全世界各地都遍布不计其数都数据中⼼和服务器，CDN服务简单来讲就是这些⼚商将你的服务器上⾯的⽂档分发到他们不同地区的服务器的当中。
每个地区可以称为⼀个节点，这样⽤户在访问你的⽹址时，浏览器发送的请求就会优先绕去离客户最近的节点来获取数据，这样⽅便客户更快的速度访问⽹站。
CDN的全称是 Content Delivery Network，即内容分发⽹络，CDN是构建在现有⽹络基础之上的智能虚拟⽹络，依靠部署在各地的边缘服务器，通过中⼼平台的负载均衡、内容分发、调度等功能模块，使⽤户就近获取所需内容，降低⽹络拥塞，提⾼⽤户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术——。
引⼊CDN
引⼊CDN提供的第三⽅库的地址，这边我引⽤了⼏个重要且较⼤的依赖：vue vuex elemenet-ui vue-router echarts axios
<!-- public/index.html -->
<script src="cdn.bootcss/vue/2.6.11/vue.min.js"></script>
<script src="cdn.bootcss/vue-router/3.0.2/vue-router.min.js"></script>
<script src="cdn.bootcss/vuex/3.5.1/vuex.min.js"></script>
<script src="cdnjs.cloudflare/ajax/libs/axios/0.21.1/axios.min.js"></script>
<link rel="stylesheet" href="unpkg/element-ui@2.13.2/lib/theme-chalk/index.css" rel="external nofollow" >
<script src="cdn.bootcss/element-ui/2.13.2/index.js"></script>
<script src="unpkg/element-ui@2.13.2/lib/index.js"></script>
<script src="cdn.bootcss/echarts/5.0.2/echarts.min.js"></script>
添加引⼊的库
在 fig.js中添加需要从CDN引⽤的依赖库
...
configureWebpack: {
...
externals: {
// 指定需要挂载的第三⽅库格式：第三⽅库名：'库在项⽬中的别名'
// 注意element-ui别名只能⽤ELEMENT，改了会出现undefined的保存
vue: 'Vue',
vuex: 'Vuex',
'vue-router': 'VueRouter',
axios: 'axios',
echarts: 'echarts',
'element-ui': 'ELEMENT'
},
...
}
...
注释项⽬中⽤到依赖的地⽅
提⽰：如果项⽬较⼤，需要注释的地⽅很多，我建议先把引⼊cdn的库的package.json⾥删除，然后运⾏项⽬，肯定会提⽰模块缺失，哪⾥提⽰哪⾥注释，不会有遗漏。
可能出现的报错
element-ui的别名只能设置为‘ELEMENT'，在按需引⼊时，使⽤ELEMENT.Message…error(…)，我试过修改未其他，但是这样会报xxx is undefined
⼤⽂件⽂件定位对⽐
对⽐下cdn前后⼤⽂件分布
cdn加速前：
cdn加速后：
⽂件减⼩很多，⼤依赖基本没有
成果
对⽐下，前后效果很是很明显的
⾸屏加载时间优化
上⾯这个过程其实已经是在优化⾸屏加载的时间了，是不过⾸屏加载时间还可以再进⾏优化
在只进⾏了上⾯的打包优化时，⾸屏时间⽐较：
优化前加载时间1.92秒，优化后1.26秒，加载的资源也减⼩不少，总之提升明显。
因为使⽤了cdn，所以requset的数量有所增加
路由懒加载优化
定义
懒加载简单来说就是延迟加载路由或按需加载路由，即在需要的时候的时候进⾏加载，不需要就先不进⾏加载，这样可以加快项⽬⽹页的加载速度。常⽤实现⽅法
1、vue异步组件实现路由懒加载
component：resolve=>(['需要加载的路由的地址'，resolve])
2、es提出的import(推荐使⽤这种⽅式)
// 下⾯2⾏代码，没有指定webpackChunkName，每个组件打包成⼀个js⽂件。
const Index = () => import('@/components/index')
const About = () => import('@/components/about') */
// 下⾯3⾏代码，指定了相同的webpackChunkName，会合并打包成⼀个js⽂件。把组件按组分块
const Home =  () => import(/* webpackChunkName: 'visualization' */ '@/components/home')
const Index = () => import(/* webpackChunkName: 'visualization' */ '@/components/index')
const About = () => import(/* webpackChunkName: 'visualization' */ '@/components/about')
以我项⽬的打包为例，不指定webpackChunkName打包出来js⽂件夹有17个⽂件
指定两个页⾯路由为相同的webpackChunkName后打包出来未⽂件夹只有16个
原因就是相同的webpackChunkName会合并打包为⼀个js⽂件
gzip压缩优化
简单说gzip就是在打包后再对⽂件进⾏⼀边压缩，让⽂件更⼩，传输更快，效果就是你点击⽹址后会很快的显⽰出相关内容
但不是每个浏览器都⽀持gzip的，如果知道客户端是否⽀持gzip呢，请求头中有个Accept-Encoding来标识对压缩的⽀持。客户端http请求头声明浏览器⽀持的压缩⽅式，服务端配置启⽤压缩，压缩的⽂件类型，压缩⽅式。当客户端请求到服务端的时候，服务器解析请求头，如果客户端⽀持gzip压缩，响应时对请求的资源进⾏压缩并返回给客户端，浏览器按照⾃⼰的⽅式解析，在http响应头，我们可以看到content-encoding:gzip，这是指服务端使⽤了gzip的压缩⽅式。
前端开启GZIP
这⾥需要⽤到⼀个插件：compression-webpack-plugin
npm install compression-webpack-plugin
在 fig.js中进⾏设置
configureWebpack: {
...
new CompressionPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.html$|\.css/,
threshold: 10240, // 只有⼤⼩⼤于该值的资源会被处理 10240
minRatio: 0.8, // 只有压缩率⼩于这个值的资源才会被处理
// 删除原⽂件
/
/ 如果开发环境要⽤就设置未false，不然编辑以后页⾯打不开
// 如果就⽣产环境⽤可以设置为true，这样打包后的体积更⼩
deleteOriginalAssets: false
}),nginx部署前端项目
...

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。