The first screen load optimization
Updated on 2019-07-11
Based Project vue2.x + vue-router + vuex + element-ui binding vue-cli3.0.
Background and Results: After the line item fold slower loading, loading time of 11s +, after a loading time optimization control in about 4s, packaged changed from the original volume of 5.76M 2.54M.
Optimization direction:
-
1. The components are loaded on demand.
-
2. The picture compression.
-
3.cdn introduced resource (vue, vuex, vue-router, component library, etc.)
-
4. Use gzip (Open Server requires gzip)
Other: remove redundant code and comment, the Seven cattle cloud storage of static resources such cdn site! !
Some tools :
Webpack Bundle Analyzer plug-in, webbpack packaged analysis tools Webpack Bundle Analyzer;
Image compression site: TinyPNG
speed website: Pingdom
WebPACK packaged analysis tools are installed:
npm install --save-dev webpack-bundle-analyzer //npm安装
yarn add -s webpack-bundle-analyzer -D//yarn 安装
① then also need to configure the inside vue.config.js
module.exports = {
baseUrl: process.env.NODE_ENV == 'production' ? './' : '/',
outputDir: 'dist',
assetsDir: 'static',
chainWebpack: config => {//①这里是配置的部分
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
},
}
Then run the project there will be such a page out of a rear package file size (mouse slide into file blocks display). According to this continuous optimization you look after your project file size optimization.
Image compression site , drag the picture to that location, automatic compression, the big picture point png image compression or substantial, and finally under ps change the suffix jpg, or direct change, can be used on the line. Why, because I found that even large jpg images (jpg can not compress some embarrassment), but request less time than when using png images of the same size, go back to understand why.
Gun site : the domain you deploy, stick to the appropriate location. Wait a moment, the results came out.
The topic began
components are loaded on demand
official website made it very clear the
//main.js
import {Input,Radio,FormItem,Icon,Row,Col,Upload,Message,MessageBox} from 'element-ui'
Vue.use(Input);Vue.use(Radio);Vue.use(FormItem);Vue.use(Icon);Vue.use(Row);Vue.use(Col);Vue.use(Upload);
Vue.use(Loading);Vue.use(DatePicker);Vue.use(Table);Vue.use(TableColumn);
//Vue.use(Message);Vue.use(MessageBox);//
The above message and if you MessageBox () method with Vue.use, he will automatically execute it again if such a use
method: Global Use
Vue.prototype.$message = Message;
Vue.prototype.$confirm = MessageBox.confirm;//因为我用到了confirm
Method Two: the need within the template
//user.vue
import Message from 'element-ui'
mounted(){
Message.error(“错误！“)；
}
CDN introduced
several cdn Resource Station: jsdeliver , bootCDN , unpkg behind the site search time plus '/ Search package' after the address,
first introduced in html script tag
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" type="images/x-icon" href="logo1.png">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/player/lottie.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js"></script>
<!--你如要用vue devtools,需引用vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/bin/jsencrypt.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/iview/3.4.2-rc.1/iview.min.js"></script>
<title>Title</title>
</head>
vue.config.js
module.exports = {
// 部署应用的根路径(默认'/'),也可用相对路径(存在使用限制)
baseUrl: process.env.NODE_ENV == 'production' ? './' : '/',
outputDir: 'dist',
assetsDir: 'static',
configureWebpack: {//这里是添加的部分
externals:{
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'element-ui': 'ELEMENT',
'axios': 'axios',
'echarts': 'echarts',
'lottie-web': 'lottie',
'jsencrypt': 'JSEncrypt',
'iview': 'iview'
}
},
}
gzip
this optimization approach requires server (back-end) open gzip, I will just say something about the front-end needs to be done
Note: the premise gzip_static in force is nginx (if using nginx) opened gzip_static compression and requests ending .gz file exists with the same name and directory.
Then compressed using gzip_static first ready gz compressed files, and the server will consume more space to store the compressed file and the original file, the pros and cons to their own assessment.
Reference: The first screen optimized load github / vue-cli3-config
Install compression-webpack-plugin plugin
npm i compression-webpack-plugin -save-dev
//或者
yarn -D compression-webpack-plugin
//vue.config.js
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);//检测构建环境
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
module.exports = {
configureWebpack: config => {
if(IS_PROD){
const plugins = [];
plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: productionGzipExtensions,
threshold: 10240,
minRatio: 0.8,
})
);
config.plugins = [
...config.plugins,
...plugins
];
}
}
};
Then packaged (yarn build) can be seen more than 10k files have been packaged with the same name suffix .gz file
The purpose is to write a record and learn from each other!
Do you like Skittles? I have a giraffe, you can squeeze you!
