一、路由懒加载
1、作用
晋升用户体验,晋升首屏组件加载速度,解决白屏问题
2、代码示例
2.1 未应用路由懒加载
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
2.2 应用路由懒加载
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
// 办法一:vue 异步组件实现
// component: resolve => (require(['@/components/HelloWorld'], resolve))
// 办法二:import 办法 (罕用)
component: () => import('@/components/HelloWorld')
}
]
})
二、组价懒加载
1、代码示例
1.1 本来写法
<template>
<div class="hello">
<hello-world></hello-world>
111
</div>
</template>
<script>
import HelloWorld from './HelloWorld'
export default {
components: {HelloWorld},
data() {
return {msg: 'this is Vue App'}
}
}
</script>
1.2 组件懒加载写法
<template>
<div class="hello">
<hello-world></hello-world>
111
</div>
</template>
<script>
export default {
components: {
// 办法一
'HelloWorld': () => import('./HelloWorld'),
// 办法二
// HelloWorld': resolve => (['./HelloWorld'], resolve)
}
}
</script>
三、通过线上引入 CDN 链接
1、找到我的项目中的 index.html 文件
<script src='https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.min.js'></script>
2、配置 webpack.base.conf.js
在 module.exports 中退出以下代码
externals: {
// 键:示意导入包语法 from 前面跟着的名称
// 值:示意 script 引入 js 文件时,在全局环境中的变量名称
vue: 'Vue',
axios: 'axios',
'vue-router': 'Router'
}
四、gzip 暴力压缩
1、nginx 开启 gzip 模式
server {
listen 8103;
server_name ***;
# 开启 gzip
gzip on;
# 进行压缩的文件类型
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/png image/gif;
# 是否在 http header 中增加 Vary: Accept-Encofing, 倡议开启
gzip_vary on;
}
2、Vue 开启 gzip
2.1 装置依赖
npm install compression-webpack-plugin@1.1.12 –save-dev
2.2 配置 gzip
config –> index.js
build: {
productionGzip: true,
productionGzipExtensions: ['js', 'css']
}
五、拓展:剖析文件大的起因
利用 webpack-bundle-analyzer 分析器,剖析我的项目依赖关系
build –> webpack.prod.conf.js
const BunldeAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugin: [new BunldeAnalyzerPlugin(),
]
而后运行 npm run build 打包命令,浏览器会呈现如下页面,此时咱们就能看到哪些文件外面到底蕴含了什么货色