前端优化杂烩

发表于 | 分类于 | 阅读次数:

CDN加速

实习的时候公司用了这个，不过感觉是运维或者后端的人干的，当时我把项目打包后，他们说要放在cdn上能加速，觉得有点意思。。了解了解。。

内容分发网络（Content delivery network或Content distribution network，缩写：CDN）是指一种通过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。

CDN主要功能是在不同的地点缓存内容，通过负载均衡技术，将用户的请求定向到最合适的缓存服务器上去获取内容，比如说，是北京的用户，我们让他访问北京的节点，深圳的用户，我们让他访问深圳的节点。通过就近访问，加速用户对网站的访问。解决Internet网络拥堵状况，提高用户访问网络的响应速度。

配置CND路径：/config/index.js文件中，修改assetsPublicPath字段，设置为cdn前缀即可。

webpack gzip压缩

基于vue

1
2
3
4
5
6
npm install compression-webpack-plugin

//config/index.js
productionGzip: true,		//将这个字段设置为true

npm run build

查看效果：

image.png

这个方案，需要服务端的支持，nginx需要开启gzip支持。

vue单页面打包文件大？首次加载慢？nginx带你飞，从7.5M到1.3M蜕变

打包分析

项目功能做完之后，或者在项目进行的过程中，有时候想优化却无从下手，或者有时候我们优化某一个模块，却发现再怎么优化也提升不了多少性能。。所以，又目的优化很重要。小伙伴介绍的一种方法（滑稽：Webpack Bundle Analyzer

1
2
3
4
5
//安装依赖
npm install --save-dev webpack-bundle-analyzer
//webpack配置 /build/webpack.prod.conf.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugins: [new BundleAnalyzerPlugin(),]

然后再每次打包的时候，这个工具会自动开启一个服务，用来显示项目中各个模块所占的大小。

1
npm run build

效果如下：

image.png

组件按需加载

未加入按需加载时：

image.png

路由懒加载：结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);
export default new Router({
  mode: 'hash',
  routes: [
    {
      path: '/',
      component: resolve => require(['../components/HelloWorld'],resolve)
    },
    {
      path: '/normal',
      component: resolve => require(['../components/NormalRem'],resolve)
    }
  ]
})

组件间的依赖是独立的。

image.png